import React from 'react';
import {observer, inject} from 'mobx-react';
import {
  Card, CardTitle, CardText,
  Divider,
  FlatButton,
  RaisedButton,
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
  Toolbar,
  ToolbarGroup,
  CardHeader, Dialog,
  Avatar, ListItem
} from 'material-ui';
import {Link} from 'react-router-dom';
import {LINKS} from "../../../routes";
import {DIALOG} from "../../../stores/global_ui";
import AddIcon from 'material-ui/svg-icons/content/add';
import RemoveIcon from 'material-ui/svg-icons/content/remove';
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
import {Icon} from 'antd';
// import MakePaymentDialog from './MakePaymentDialog/index';
// import CancelPaymentDialog from './CancelPaymentDialog/index';
import moment from "moment";
import get from 'lodash.get';
import DC from 'decimal.js-light';
import NumberFormat from 'react-number-format';
import EmptyComponent from '../../EmptyComponent';
import confirm from '../../../util/confirm';
import {constant} from "../../../config/const";
// import MerchantInputShippingCodeDialog from "./MerchantInputShippingCodeDialog";
// import GojekDelivery from "./GojekDelivery";
import LoadingDialog from '../../LoadingDialog/index';
// import PreorderAddNotes from './PreorderAddNotes';
import '../style.scss'
import {uniqBy,startCase,upperCase,reverse} from 'lodash';
import PrintProvider, {Print, NoPrint} from 'react-easy-print';
import PrintIcon from 'material-ui/svg-icons/action/print';
@inject('appstate')
@observer
export default class OrderDetailComponent extends React.Component {

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      value: 1,
      searchText: '',
      slideIndex: 0,
      tabSelected: 'gi',
      openModal: false,
      errorBook: false,
      errorMessage: '',
      itemData: {}
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.globalUI = props.appstate.globalUI;
    // this.order = props.appstate.order;
  }

  componentDidMount() {
    // this.order.getDetail(this.props.match.params.id);

  }

  handleUpdateInput = (searchText) => {
    this.setState({
      searchText: searchText,
    });
  };

  handleNewRequest = () => {
    this.setState({
      searchText: '',
    });
  };

  tabsHandleChange = (value) => {
    this.setState({
      slideIndex: value,
    });
  };

  closeError = () => {
    this.setState({
      errorBook: false
    })
  }


  handleChange = (tabSelected) => {
    this.setState({
      tabSelected: tabSelected,
    });
    // this.props.history.push(tabSelected);
  };

  handleCloseModal = () => {
    this.setState({
      openModal: false
    })
  };


  handleOpenModal = () => {
    this.setState({
      openModal: true
    })
  }


  handlePrint() {
    window.print();
  }

  render() {

    return (
      <PrintProvider>
        <NoPrint>
          <div className="orderDetail containerMiddle animated fadeIn">

            <div style={{marginBottom: '10px'}}>
              <FlatButton
                className="headerMenu"
                hoverColor="#f1f5f9"
                style={{background: '#ffffff00'}}
                onClick={() => this.props.history.goBack()}
                label="Back"
                primary={true}
                icon={<NavigationArrowBack/>}
              />
            </div>

            {/*<MakePaymentDialog/>*/}

            {/*<CancelPaymentDialog/>*/}
            {/*<MerchantInputShippingCodeDialog/>*/}
            {/*<GojekDelivery/>*/}
            {/*<PreorderAddNotes defaultValue={this.state.itemData}/>*/}

            <div className="row">
              <div className="col s12 m9 l9" style={{marginBottom: 0}}>
                <Card className="cardLite cardDashboard row alert">
                  <CardHeader
                    title={
                      <Toolbar style={{backgroundColor: '#fff', padding: 0}}>
                        <ToolbarGroup>
                          <CardHeader
                            style={{padding: 0}}
                            // subtitle={<p>{this.orderStatusDesc(this.order.selectedOrder.order_status_id)}</p>}
                            title={<div style={{
                              fontWeight: '500', fontSize: "1.25rem",
                              lineHeight: 1.2,
                              color: " #334152"
                            }}>
                              <span> {get(this.taskStore.selectedData,'name','-')}</span>
                            </div>}
                          />
                        </ToolbarGroup>
                        <ToolbarGroup>
                          <RaisedButton label="Reject" icon={<PrintIcon/>} primary={true} onClick={() => this.handlePrint()}/>
                          <RaisedButton label="Approve" icon={<PrintIcon/>} primary={true} onClick={() => this.handlePrint()}/>
                        </ToolbarGroup>
                      </Toolbar>
                    }
                  />
                </Card>


                  <Print main name=" foo">
                    <Card className="cardLite cardDashboard row">

                      <div className="flexSpaceBetween">
                        <div className="orderContainerHeader">
                          <CardTitle style={{padding: 0, fontSize: 20}}
                                     titleStyle={{fontSize: 20, color: '#334152', margin: 0}}
                                     title={<div className={'orderFormHeading'}>
                                       <h3 style={{margin: 0}}>Task Details</h3>
                                       <p className={'orderFormDate'}
                                          style={{margin: 0}}>{moment(get(this.taskStore.selectedData,'created_at',null)).format("DD MMMM YYYY, HH:mm:ss")}</p>
                                     </div>}
                          />
                          {/*<div>*/}
                            {/*/!*<div className="orderFormLabel">Order #</div>*!/*/}
                            {/*<div className="orderFormLabelNumber">*/}
                              {/*<span style={{color : '#3E4B5B',fontWeight : 'bold'}}>Order #</span> <span>INV/{moment(this.order.selectedOrder.created_at).format("YYYYMMDD")}/XVII/{this.order.selectedOrder.id.split('-')[0]}</span></div>*/}

                          {/*</div>*/}
                          {/*<div>*/}
                            {/*<div className="orderFormLabelNumber">*/}
                              {/*<span style={{color : '#3E4B5B',fontWeight : 'bold'}}>Shipping By</span> : <span>{this.order.selectedOrder.shipping_method.name}</span></div>*/}

                          {/*</div>*/}
                        </div>
                      </div>
                      <Divider/>
                      <CardHeader style={{paddingBottom: 0, paddingTop: 18, paddingLeft: 18, paddingRight: 18}}
                                  subtitle={<h2 style={{fontSize: 12}}>STORE INFORMATION</h2>}/>
                      <CardText style={{paddingBottom: 0, padding: '8px 18px 0 18px'}}>
                        <div style={{
                          boxShadow: "none",
                          border: "1px solid #d4d4d4",
                          backgroundColor: "#f9f9f9",
                          padding: "10px 10px 10px 20px",
                          marginTop: 0,
                          marginBottom: 0,
                          textAlign: ''
                        }} className="card-panel">
                          <div className="row no-margin">

                            <div className="col s12 m12 l6">
                              <div className="listCustDetail">
                                <div className="listCustDetailItem flex">
                                  <p className="listCustomerDetailItemKey">Name</p>
                                  <p
                                    className="listCustomerDetailItemValue">{get(this.taskStore.selectedData,'user.profile.firstname','-' )} {get(this.taskStore.selectedData,'user.profile.lastname',"")}</p>
                                </div>
                                <div className="listCustDetailItem flex">
                                  <span className="listCustomerDetailItemKey">Store Name</span>
                                  <p
                                    className="listCustomerDetailItemValue" style={{display:'flex',flexWrap: 'wrap'}}>{get(this.taskStore.selectedData,'user.store.name','-')}</p>
                                </div>
                                <div className="listCustDetailItem flex">
                                  <span className="listCustomerDetailItemKey">Email</span>
                                  <p
                                    className="listCustomerDetailItemValue" style={{display:'flex',flexWrap: 'wrap'}}>{get(this.taskStore.selectedData,'user.email','-')}</p>
                                </div>
                                <div className="listCustDetailItem flex">
                                  <span className="listCustomerDetailItemKey">Username</span>
                                  <p
                                    className="listCustomerDetailItemValue" style={{display:'flex',flexWrap: 'wrap'}}>{this.taskStore.selectedData.user.username}</p>
                                </div>
                                <div className="listCustDetailItem flex">
                                  <p className="listCustomerDetailItemKey">Phone</p>
                                  <p
                                    className="listCustomerDetailItemValue">{(this.taskStore.selectedData.user.profile.phone == null) ? 'empty phone number' : this.taskStore.selectedData.user.profile.phone}</p>
                                </div>
                                <div className="listCustDetailItem flex">
                                  <p className="listCustomerDetailItemKey">Gender</p>
                                  <p className="listCustomerDetailItemValue">{(this.taskStore.selectedData.user.profile.gender == null) ? 'empty gender' : this.taskStore.selectedData.user.profile.gender }</p>
                                </div>

                              </div>

                            </div>


                            {/*<div className="col s12 m12 l6">*/}

                              {/*<div className="listCustDetail">*/}
                                {/*<div className="listCustDetailItem flex">*/}
                                  {/*<p className="listCustomerDetailItemKey">Store Name</p>*/}
                                  {/*<p*/}
                                    {/*className="listCustomerDetailItemValue">{this.order.selectedOrder.user_address_buyer.receiver_name}</p>*/}
                                {/*</div>*/}
                                {/*<div className="listCustDetailItem flex">*/}
                                  {/*<p className="listCustomerDetailItemKey">Name of Address</p>*/}
                                  {/*<p*/}
                                    {/*className="listCustomerDetailItemValue">{this.order.selectedOrder.user_address_buyer.name}</p>*/}
                                {/*</div>*/}
                                {/*<div className="listCustDetailItem flex">*/}
                                  {/*<p className="listCustomerDetailItemKey">Phone of Address</p>*/}
                                  {/*<p*/}
                                    {/*className="listCustomerDetailItemValue">{this.order.selectedOrder.user_address_buyer.phone_number}</p>*/}
                                {/*</div>*/}
                                {/*<div className="listCustDetailItem flex">*/}
                                  {/*<p className="listCustomerDetailItemKey">City</p>*/}
                                  {/*<p*/}
                                    {/*className="listCustomerDetailItemValue">{this.order.selectedOrder.user_address_buyer.city.name}</p>*/}
                                {/*</div>*/}
                                {/*<div className="listCustDetailItem flex">*/}
                                  {/*<p className="listCustomerDetailItemKey">Province</p>*/}
                                  {/*<p*/}
                                    {/*className="listCustomerDetailItemValue">{this.order.selectedOrder.user_address_buyer.province.name}</p>*/}
                                {/*</div>*/}
                                {/*<div className="listCustDetailItem flex">*/}
                                  {/*<p className="listCustomerDetailItemKey">Address</p>*/}
                                  {/*<p*/}
                                    {/*className="listCustomerDetailItemValue">{this.order.selectedOrder.user_address_buyer.address}</p>*/}
                                {/*</div>*/}
                              {/*</div>*/}


                            {/*</div>*/}

                          </div>
                        </div>
                      </CardText>


                      {/*<div className={' no-hover'} style={{marginTop: 18, marginBottom: 15}}>*/}
                        {/*<Table selectable={false} className="TableOrder">*/}
                          {/*<TableHeader displaySelectAll={false}*/}
                                       {/*adjustForCheckbox={false}*/}
                                       {/*enableSelectAll={false}>*/}
                            {/*<TableRow style={{height: 38, background: '#f6f9fc'}}>*/}

                              {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
                                                 {/*style={{height: 'auto'}}>Items</TableHeaderColumn>*/}
                              {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
                                                 {/*style={{height: 'auto'}}>Quantity Request</TableHeaderColumn>*/}

                              {/*<TableHeaderColumn className="TableHeaderColumnAkun align-center"*/}
                                                 {/*style={{height: 'auto'}}>Quantity</TableHeaderColumn>*/}
                              {/*<TableHeaderColumn className="TableHeaderColumnAkun align-right"*/}
                                                 {/*style={{height: 'auto'}}>Price</TableHeaderColumn>*/}
                              {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
                                                 {/*style={{height: 'auto'}}>Subtotal</TableHeaderColumn>*/}
                            {/*</TableRow>*/}
                          {/*</TableHeader>*/}
                          {/*<TableBody displayRowCheckbox={false}>*/}
                            {/*{*/}
                              {/*(this.order.selectedOrder.user_order_items) ?*/}
                                {/*this.order.selectedOrder.user_order_items.map((data, index) => (*/}
                                  {/*<TableRow>*/}
                                    {/*<TableRowColumn style={{whiteSpace : 'normal !important'}} key={data.id}>*/}
                                      {/*{data.item.name}*/}
                                      {/*<p style={{margin: '2px 0', fontSize: 10,}}>*/}
                                        {/*Detail: <Link className={'viewDetailLink'}*/}
                                                      {/*style={{fontWeight: 'bold', textDecoration: 'underline'}}*/}
                                                      {/*to={`${LINKS.FORM_ITEMS}/edit/${data.item.id}`} target="_blank">View details</Link>*/}
                                      {/*</p>*/}
                                    {/*</TableRowColumn>*/}
                                    {/*{data.is_preorder ?*/}
                                      {/*<TableRowColumn key={data.id}>*/}
                                        {/*{data.preorder_store_note ?*/}
                                          {/*<p style={{margin: 0}}>{(data.preorder_buyer_note)} <span style={{*/}
                                            {/*fontSize: '.72rem',*/}
                                            {/*color: '#71c21a',*/}
                                            {/*fontWeight: 'bold'*/}

                                          {/*}} className={'smaller lighter'}>Responded</span></p> :*/}
                                          {/*<p style={{margin: 0}}>{data.preorder_buyer_note}gr <span style={{*/}
                                            {/*fontSize: '.72rem',*/}
                                            {/*color: 'red',*/}
                                            {/*fontWeight: 'bold'*/}
                                          {/*}} className={'smaller lighter'}>Need Response</span>*/}
                                          {/*</p>}*/}
                                        {/*{data.preorder_buyer_note ?*/}
                                          {/*<div>*/}
                                            {/*<p style={{margin: '2px 0', fontSize: 10}}>*/}
                                              {/*Detail: <a className={'viewDetailLink'} style={{*/}
                                              {/*cursor: 'pointer',*/}
                                              {/*fontWeight: 'bold',*/}
                                              {/*textDecoration: 'underline'*/}
                                            {/*}}*/}
                                                         {/*onClick={() => this.openPreorderDialog(data)}>View notes</a>*/}
                                            {/*</p></div> : <div>-</div>}</TableRowColumn>*/}
                                      {/*:*/}
                                      {/*<TableRowColumn key={data.id}>-</TableRowColumn>*/}
                                    {/*}*/}

                                    {/*<TableRowColumn key={data.id}*/}
                                                    {/*className={'align-center'}>{data.quantity !== 0 ? data.quantity + "pcs" :*/}
                                      {/*<NumberFormat value={data.preorder_weight} displayType={'text'}*/}
                                                    {/*suffix={'gr'}/>}</TableRowColumn>*/}
                                    {/*<TableRowColumn className="align-right"><NumberFormat value={data.price}*/}
                                                                                          {/*displayType={'text'}*/}
                                                                                          {/*thousandSeparator={true}*/}
                                                                                          {/*prefix={'Rp '}/></TableRowColumn>*/}
                                    {/*<TableRowColumn><NumberFormat value={data.subtotal} displayType={'text'}*/}
                                                                  {/*thousandSeparator={true} prefix={'Rp '}/></TableRowColumn>*/}
                                  {/*</TableRow>*/}
                                {/*)) : <EmptyComponent type="empty" header="" content="There is no data in sight"/>*/}
                            {/*}*/}

                            {/*<TableRow displayBorder={false} className="TableRowCondensed TableRowCondensedFirst">*/}
                              {/*<TableRowColumn colSpan={3} className="TableRowColumnCondensed TableRowColumnCondensedFirst"/>*/}
                              {/*<TableRowColumn*/}
                                {/*className="align-right font-500 TableRowColumnCondensed TableRowColumnCondensedFirst">Subtotal</TableRowColumn>*/}
                              {/*<TableRowColumn className="TableRowColumnCondensed TableRowColumnCondensedFirst"><NumberFormat*/}
                                {/*value={this.order.selectedOrder.subtotal} displayType={'text'} thousandSeparator={true}*/}
                                {/*prefix={'Rp '}/></TableRowColumn>*/}
                            {/*</TableRow>*/}
                            {/*<TableRow displayBorder={false} className="TableRowCondensed">*/}
                              {/*<TableRowColumn colSpan={3} className="TableRowColumnCondensed"/>*/}
                              {/*<TableRowColumn className="align-right font-500 TableRowColumnCondensed">Discount</TableRowColumn>*/}
                              {/*<TableRowColumn className="TableRowColumnCondensed"><NumberFormat value={0.00}*/}
                                                                                                {/*displayType={'text'}*/}
                                                                                                {/*thousandSeparator={true}*/}
                                                                                                {/*prefix={'Rp '}/></TableRowColumn>*/}
                            {/*</TableRow>*/}
                            {/*<TableRow displayBorder={false} className="TableRowCondensed">*/}
                              {/*<TableRowColumn colSpan={3} className="TableRowColumnCondensed"/>*/}
                              {/*<TableRowColumn className="align-right font-500 TableRowColumnCondensed">Shipping*/}
                                {/*Fee</TableRowColumn>*/}
                              {/*<TableRowColumn className="TableRowColumnCondensed"><NumberFormat*/}
                                {/*value={this.order.selectedOrder.shipping_price} displayType={'text'} thousandSeparator={true}*/}
                                {/*prefix={'Rp '}/></TableRowColumn>*/}
                            {/*</TableRow>*/}
                            {/*<TableRow displayBorder={false} className="TableRowCondensed">*/}
                              {/*<TableRowColumn colSpan={3} className="TableRowColumnCondensed"/>*/}
                              {/*<TableRowColumn className="align-right font-500 TableRowColumnCondensed">Total</TableRowColumn>*/}
                              {/*<TableRowColumn className="TableRowColumnCondensed "><NumberFormat*/}
                                {/*value={(+this.order.selectedOrder.shipping_price) + (+this.order.selectedOrder.subtotal)}*/}
                                {/*displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>.00</TableRowColumn>*/}
                            {/*</TableRow>*/}
                          {/*</TableBody>*/}
                        {/*</Table>*/}
                      {/*</div>*/}
                    </Card>
                  </Print>

              </div>
            </div>


            <Dialog
              style={
                {
                  margin: 'auto'
                }
              }
              open={this.globalUI.loadingVisibility
              }>
              <div
                style={
                  {
                    textAlign: 'center'
                  }
                }>
                <LoadingDialog/>
              </div>
            </Dialog>

            <Dialog
              title="Error"
              style={{margin: 'auto'}}
              actions={[<FlatButton primary={false} label="Ok" onClick={this.closeError}/>]}
              open={this.state.errorBook}>
              {this.state.errorMessage}
            </Dialog>
          </div>
        </NoPrint>
      </PrintProvider>
    )
  }
}

