import React from 'react';
import {observer, inject} from 'mobx-react';
import {
  Card, CardTitle, CardText,
  Divider,
  MenuItem,
  FlatButton,
  RaisedButton,
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
  TextField,
  Toolbar,
  ToolbarGroup,
  ToolbarSeparator, ToolbarTitle, CardHeader, Dialog,
} 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 NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';

import moment from "moment";
import get from 'lodash.get';
import DC from 'decimal.js-light';
import NumberFormat from 'react-number-format';

@inject('appstate')
@observer
export default class OrderDetailAirlinesComponent extends React.Component {

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      value: 1,
      searchText: '',
      slideIndex: 0,
      tabSelected: 'gi',
      openModal: false
    };
    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.getAirlineDetail(this.props.match.params.id);
  }

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

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

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


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

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

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

  render() {
    const customer = {
      name: 'Ridwan Abadi',
      identity_number: '98261536156313561',
      email: 'welove6215@einrot.com',
      address: 'Jalan Pramuka No. 81, Marga Jaya, Bekasi Selatan, Marga Jaya, Bekasi Sel., Kota Bks, Jawa Barat 17141',
      handphone: '081190876',
      phone: '0',
      place_birth: 'Jakarta',
      birth_date: moment().format('DD MMM YYYY'),
      gender: 'Male',
      tax_id: '98261536156313561',
      martial_status: 'Married'
    }

    const order = {
      id: '467d6b50-ade0-4dd0-98ca-35cd083e16e0',
      order_id: 'book_461a1df5',
      package: 'The Exoticsm Of Minang',
      description: 'Feel the joy of wonderful world of exotic, culture, and outstanding view that will amaze you to the bone. Enjoy your holiday in very nice and peaceful place to clear your mind. With great hotel and profesional tour guide, we ensure you that you will have a unforgetable memories and happiness.\n',
      registered: moment(),
      detail_package: [
        {
          name: 'Destination',
          value: 'Bukittinggi, Minangkabau'
        },
        {
          name: 'Transport',
          value: 'Custom'
        },
        {
          name: 'Duration',
          value: '4 day 3 night'
        }
      ],
      payment_type: 'Instalment',
      status: 'active'
    }

    const totalPaid = get(this.order.selectedOrder, 'payments', [])
    .map(pay => pay.amount)
    .reduce((total, v) => total.add(v), new DC(0));

    const priceAfterDisc = get(this.order.selectedOrder, 'price_after_discount', 0);
    const disc = new DC(get(this.order.selectedOrder, 'price') || 0).minus(priceAfterDisc || 0);

    const amountDue = new DC(priceAfterDisc || 0).minus(totalPaid);

    const actionsModals = [
      <FlatButton
        label="Cancel"
        primary={true}
        onClick={this.handleCloseModal}
      />,
      <FlatButton
        label="Ok"
        primary={true}
        onClick={() => {
          this.order.payAirlineTicket().then((airlineTicket) => {
            this.order.setOrderStatus('ticketed');
            this.globalUI.openSnackbar('Payment success');
          });
        }}
      />,
    ];

    return (
      <div className="customerDetail containerMiddle animated fadeIn">
        <Dialog
          title="Are you sure that all data is correct?"
          actions={actionsModals}
          modal={true}
          open={this.state.openModal}
        >
          You will be charged
        </Dialog>

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

        <Card className="row">

          <div className="flexSpaceBetween" style={{padding: 16}}>
            <div className="">
              <CardTitle style={{padding: 0, fontSize: 22}}
                         titleStyle={{fontSize: 22}}
                         title="Airlines Order Form"
              />
              <div className="listCustDetail">
                <div className="listHeaderCustDetailItem flex">
                  <p className="listHeaderCustomerDetailItemKey">PNR ID</p>
                  <p className="listHeaderCustomerDetailItemValue"><code>{this.order.orderAirlineDetail.pnrid}</code></p>
                </div>
                <div className="listHeaderCustDetailItem flex">
                  <p className="listHeaderCustomerDetailItemKey">Booking Code</p>
                  <p className="listHeaderCustomerDetailItemValue">{this.order.orderAirlineDetail.retrieve.bookingcode}</p>
                </div>
                <div className="listHeaderCustDetailItem flex">
                  <p className="listHeaderCustomerDetailItemKey">Status</p>
                  <p className="listHeaderCustomerDetailItemValue">{this.order.orderAirlineDetail.retrieve.status}</p>
                </div>
                <div className="listHeaderCustDetailItem flex">
                  <p className="listHeaderCustomerDetailItemKey">Time Limit</p>
                  <p className="listHeaderCustomerDetailItemValue">{this.order.orderAirlineDetail.retrieve.timelimit}</p>
                </div>
              </div>
            </div>
            <ToolbarGroup>
              <RaisedButton icon={<AddIcon/>} label="Pay" primary={true}
                            onClick={() => this.handleOpenModal()}/>
            </ToolbarGroup>
          </div>
          <Divider/>

          <CardHeader actAsExpander={true}
                      showExpandableButton={false} style={{paddingBottom: 0}}
                      subtitle={<a style={{fontSize: 12}}>PASSENGER INFORMATION</a>}/>
          <div style={{marginTop: 18}}>
            <Table selectable={false} className="TableOrder">
              <TableHeader displaySelectAll={false}
                           adjustForCheckbox={false}
                           enableSelectAll={false}>
                <TableRow style={{height: 38, background: '#f6f9fc'}}>

                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>No. </TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Title</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Name</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Ticket No</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Date of Birth</TableHeaderColumn>
                </TableRow>
              </TableHeader>
              <TableBody displayRowCheckbox={false}>
                {this.order.orderAirlineDetail.retrieve.pax.map(pax => {
                  return (<TableRow>
                    <TableRowColumn>{pax.paxno}</TableRowColumn>
                    <TableRowColumn>{pax.title}</TableRowColumn>
                    <TableRowColumn>{pax.name}</TableRowColumn>
                    <TableRowColumn>{pax.ticketno}</TableRowColumn>
                    <TableRowColumn>{pax.dob}</TableRowColumn>
                  </TableRow>)
                })}
              </TableBody>
            </Table>
            <Divider/>
          </div>

          <Divider/>

          <CardHeader actAsExpander={true}
                      showExpandableButton={false} style={{paddingBottom: 0}}
                      subtitle={<a style={{fontSize: 12}}>PAX CONTACT INFORMATION</a>}/>
          <div style={{marginTop: 18}}>
            <Table selectable={false} className="TableOrder">
              <TableHeader displaySelectAll={false}
                           adjustForCheckbox={false}
                           enableSelectAll={false}>
                <TableRow style={{height: 38, background: '#f6f9fc'}}>

                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>First Name</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Last Name</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Phone 1</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Phone 2</TableHeaderColumn>
                </TableRow>
              </TableHeader>
              <TableBody displayRowCheckbox={false}>
                <TableRow>
                  <TableRowColumn>{this.order.orderAirlineDetail.retrieve.paxcontact.firstname}</TableRowColumn>
                  <TableRowColumn>{this.order.orderAirlineDetail.retrieve.paxcontact.lastname}</TableRowColumn>
                  <TableRowColumn>{this.order.orderAirlineDetail.retrieve.paxcontact.phone1}</TableRowColumn>
                  <TableRowColumn>{this.order.orderAirlineDetail.retrieve.paxcontact.phone2}</TableRowColumn>
                </TableRow>
              </TableBody>
            </Table>
            <Divider/>
          </div>
        </Card>
      </div>
    )
  }
}