import React from 'react';
import {observer, inject} from 'mobx-react';
import bind from 'bind-decorator';
import {
  Card,
  CardActions,
  CardHeader,
  CardMedia,
  CardTitle,
  AutoComplete,
  CardText,
  FlatButton,
  Divider,
  Tabs, Tab,
  RaisedButton,
  Toolbar,
  DatePicker,
  FontIcon,
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
  MenuItem,
  ToolbarGroup,
  FloatingActionButton,
  ToolbarSeparator,
  IconButton,
  ToolbarTitle,
  RadioButton,
  TextField,
  Paper,
  RadioButtonGroup
} from 'material-ui';
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
import SwipeableViews from 'react-swipeable-views';
import SearchIcon from 'material-ui/svg-icons/action/search';
import AddIcon from 'material-ui/svg-icons/content/add';
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
import NavigationCancel from 'material-ui/svg-icons/navigation/cancel';
import CommunicationNoSim from 'material-ui/svg-icons/communication/no-sim';

import '../style.scss';
import {appConfig} from "../../../config/app";
import {DIALOG} from "../../../stores/global_ui";
import {LINKS} from "../../../routes";
import {Link} from "react-router-dom";
import * as _ from 'lodash';
import NumberFormat from 'react-number-format';

@inject('appstate')
@observer
export default class BookingPayment extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      value: 1,
      searchText: '',
      slideIndex: 0
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.transactionStore = props.appstate.transaction;
  }

  componentDidMount() {
    console.log('Profile loaded!');

  }

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

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

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

  numberFormat = (value) =>{
    return <NumberFormat value={value} displayType={'text'} thousandSeparator={true} prefix={'IDR '} />;
  }

  handleChange = (event, index, value) => this.setState({value});

  render() {
    const styles = {

      radioButton: {
        marginBottom: 16,
      },
    };

    return (
      <div>
        <Card className="row">

          <div className="flexSpaceBetween" style={{padding: 16}}>
            <div className="">
              <CardTitle style={{padding: 0, fontSize: 22}}
                         titleStyle={{fontSize: 22}}
                         title={_.capitalize(this.transactionStore.detail.type)}
              />
              <div className="listCustDetail">
                <div className="listHeaderCustDetailItem flex">
                  <p className="listHeaderCustomerDetailItemKey">Type</p>
                  <p className="listHeaderCustomerDetailItemValue"><code>{(this.transactionStore.detail.type == 'payment') ? 'Package Payment' : 'Package Booking Payment'}</code></p>
                </div>
                <div className="listHeaderCustDetailItem flex">
                  <p className="listHeaderCustomerDetailItemKey">Customer</p>
                  <p className="listHeaderCustomerDetailItemValue">{this.transactionStore.detail.packageTransaction.customer.name} - <code>{this.transactionStore.detail.packageTransaction.customer.id.split('-')[0]}</code></p>
                </div>
                <div className="listHeaderCustDetailItem flex">
                  <p className="listHeaderCustomerDetailItemKey">Package</p>
                  <p className="listHeaderCustomerDetailItemValue">{this.transactionStore.detail.packageTransaction.packageSchedule.package.name}</p>
                </div>
                <div className="listHeaderCustDetailItem flex">
                  <p className="listHeaderCustomerDetailItemKey">Tour Schedule</p>
                  <p className="listHeaderCustomerDetailItemValue" style={{flex : '0 0 300px'}}>{moment(this.transactionStore.detail.packageTransaction.packageSchedule.depature_date).format('MMMM Do YYYY')} to {moment(this.transactionStore.detail.packageTransaction.packageSchedule.return_date).format('MMMM Do YYYY')}</p>
                </div>
                <div className="listHeaderCustDetailItem flex">
                  <p className="listHeaderCustomerDetailItemKey"></p>
                  <p className="listHeaderCustomerDetailItemValue"></p>
                </div>
                <div className="listHeaderCustDetailItem flex">
                  <p className="listHeaderCustomerDetailItemKey">Payment Method</p>
                  <p className="listHeaderCustomerDetailItemValue">{this.transactionStore.detail.packageTransaction.paymentMethod.name}</p>
                </div>
                <div className="listHeaderCustDetailItem flex">
                  <p className="listHeaderCustomerDetailItemKey">Amount</p>
                  <p className="listHeaderCustomerDetailItemValue"></p>
                </div>
              </div>
            </div>

            {/*<ToolbarGroup>
                          <IconButton tooltip="Cancel">
                            <NavigationCancel/>
                          </IconButton>
                          <IconButton tooltip="Void">
                            <CommunicationNoSim/>
                          </IconButton>
                        </ToolbarGroup>*/}
          </div>
          <Divider/>

          <div style={{marginTop: 0}}>
            <Table selectable={false}>
              <TableHeader displaySelectAll={false}
                           adjustForCheckbox={false}
                           enableSelectAll={false}>
                <TableRow style={{height: 38, background: '#f6f9fc'}}>

                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Description</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Qty</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Paid Date</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Amount</TableHeaderColumn>
                </TableRow>
              </TableHeader>
              <TableBody displayRowCheckbox={false}>

                <TableRow>
                  <TableRowColumn>{(this.transactionStore.detail.type == 'payment') ? 'Payment' : 'Booking'} order <code>{this.transactionStore.detail.packageTransaction.id}</code></TableRowColumn>
                  <TableRowColumn>1</TableRowColumn>
                  <TableRowColumn>{moment(this.transactionStore.detail.created_at).format('MMMM Do YYYY, hh:mm:ss')}</TableRowColumn>
                  <TableRowColumn>{this.numberFormat(this.transactionStore.detail.amount)}</TableRowColumn>
                </TableRow>
                <TableRow>
                  <TableRowColumn></TableRowColumn>
                  <TableRowColumn></TableRowColumn>
                  <TableRowColumn><b>Total</b></TableRowColumn>
                  <TableRowColumn><b>{this.numberFormat(this.transactionStore.detail.amount)}</b></TableRowColumn>
                </TableRow>
              </TableBody>
            </Table>
            <Divider/>

          </div>
        </Card>
        </div>
    )
  }
}
