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";

@inject('appstate')
@observer
export default class WalletCustomerDetail 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;
  }

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

  }

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

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

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

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

  render() {
    const styles = {

      radioButton: {
        marginBottom: 16,
      },
    };

    const colors = [
      'Jakarta - Soekarno - Hatta (CGK)',
      'Bali',
      'Surabaya',
      'Yogyakarta',
      'Aceh',
      'Kalimantan',
      'Medan',
      'Papua',
    ];

    const items = [
      <MenuItem key={1} value={1} primaryText="All Maskapai"/>,
      <MenuItem key={2} value={2} primaryText="Air Asia"/>,
      <MenuItem key={3} value={3} primaryText="Weeknights"/>,
      <MenuItem key={4} value={4} primaryText="Weekends"/>,
      <MenuItem key={5} value={5} primaryText="Weekly"/>,
    ];

    const count = [
      <MenuItem key={1} value={1} primaryText="1"/>,
      <MenuItem key={2} value={2} primaryText="2"/>,
      <MenuItem key={3} value={3} primaryText="3"/>,
      <MenuItem key={4} value={4} primaryText="4"/>,
      <MenuItem key={5} value={5} primaryText="5"/>,
    ];

    return (
      <div className="customerDetail containerMiddle animated fadeIn">
        <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="Transaction #1827381"
              />
              <div className="listCustDetail">
                <div className="listHeaderCustDetailItem flex">
                  <p className="listHeaderCustomerDetailItemKey">Type</p>
                  <p className="listHeaderCustomerDetailItemValue"><code>Package Down Payment</code></p>
                </div>
                <div className="listHeaderCustDetailItem flex">
                  <p className="listHeaderCustomerDetailItemKey">Date</p>
                  <p className="listHeaderCustomerDetailItemValue">10 October 2017</p>
                </div>
                <div className="listHeaderCustDetailItem flex">
                  <p className="listHeaderCustomerDetailItemKey">To</p>
                  <p className="listHeaderCustomerDetailItemValue">Agent #6767567</p>
                </div>
              </div>
            </div>

            <ToolbarGroup>
              <IconButton tooltip="Cancel">
                <NavigationCancel />
              </IconButton>
              <IconButton tooltip="Void">
                <CommunicationNoSim />
              </IconButton>
            </ToolbarGroup>
          </div>
          <Divider/>
          {/*<CardHeader actAsExpander={true}*/}
          {/*showExpandableButton={false} style={{paddingBottom: 0}}*/}
          {/*subtitle={<a style={{fontSize: 12}}>CUSTOMER INFORMATION</a>}/>*/}
          {/*<CardText expandable={true} style={{paddingBottom:0}}>*/}
          {/*<div className="row no-margin">*/}
          {/*<div className="col l6">*/}
          {/*<div className="listCustDetail">*/}
          {/*<div className="listCustDetailItem flex">*/}
          {/*<p className="listCustomerDetailItemKey">Name</p>*/}
          {/*<p className="listCustomerDetailItemValue"></p>*/}
          {/*</div>*/}
          {/*<div className="listCustDetailItem flex">*/}
          {/*<p className="listCustomerDetailItemKey">Identity Number</p>*/}
          {/*<p className="listCustomerDetailItemValue"></p>*/}
          {/*</div>*/}
          {/*<div className="listCustDetailItem flex">*/}
          {/*<p className="listCustomerDetailItemKey">Email</p>*/}
          {/*<p className="listCustomerDetailItemValue"></p>*/}
          {/*</div>*/}
          {/*<div className="listCustDetailItem flex">*/}
          {/*<p className="listCustomerDetailItemKey">Address</p>*/}
          {/*<p className="listCustomerDetailItemValue"></p>*/}
          {/*</div>*/}
          {/*<div className="listCustDetailItem flex">*/}
          {/*<p className="listCustomerDetailItemKey">Phone</p>*/}
          {/*<p*/}
          {/*className="listCustomerDetailItemValue"></p>*/}
          {/*</div>*/}
          {/*<div className="listCustDetailItem flex">*/}
          {/*<p className="listCustomerDetailItemKey">Handphone</p>*/}
          {/*<p className="listCustomerDetailItemValue"></p>*/}
          {/*</div>*/}

          {/*</div>*/}

          {/*</div>*/}

          {/*<div className="col l6">*/}
          {/*<div className="listCustDetail">*/}
          {/*<div className="listCustDetailItem flex">*/}
          {/*<p className="listCustomerDetailItemKey">Place & Birth Date</p>*/}
          {/*<p className="listCustomerDetailItemValue">, </p>*/}
          {/*</div>*/}
          {/*<div className="listCustDetailItem flex">*/}
          {/*<p className="listCustomerDetailItemKey">Gender</p>*/}
          {/*<p className="listCustomerDetailItemValue"></p>*/}
          {/*</div>*/}
          {/*<div className="listCustDetailItem flex">*/}
          {/*<p className="listCustomerDetailItemKey">Tax Id</p>*/}
          {/*<p className="listCustomerDetailItemValue"></p>*/}
          {/*</div>*/}
          {/*<div className="listCustDetailItem flex">*/}
          {/*<p className="listCustomerDetailItemKey">Martial Status</p>*/}
          {/*<p className="listCustomerDetailItemValue"></p>*/}
          {/*</div>*/}
          {/*</div>*/}

          {/*</div>*/}

          {/*</div>*/}
          {/*</CardText>*/}


          <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'}}>Price</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Discount</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Amount</TableHeaderColumn>
                </TableRow>
              </TableHeader>
              <TableBody displayRowCheckbox={false}>

                <TableRow>
                  <TableRowColumn>Package #92839 Payment</TableRowColumn>
                  <TableRowColumn>1</TableRowColumn>
                  <TableRowColumn>2.000.000</TableRowColumn>
                  <TableRowColumn>500.000</TableRowColumn>
                  <TableRowColumn>1.500.000</TableRowColumn>
                </TableRow>
                <TableRow>
                  <TableRowColumn>Package #92839 Payment</TableRowColumn>
                  <TableRowColumn>1</TableRowColumn>
                  <TableRowColumn>2.000.000</TableRowColumn>
                  <TableRowColumn>500.000</TableRowColumn>
                  <TableRowColumn>1.500.000</TableRowColumn>
                </TableRow>
                <TableRow>
                  <TableRowColumn></TableRowColumn>
                  <TableRowColumn></TableRowColumn>
                  <TableRowColumn></TableRowColumn>
                  <TableRowColumn><b>Total</b></TableRowColumn>
                  <TableRowColumn><b>3.000.000</b></TableRowColumn>
                </TableRow>

                {/*<TableRow>*/}
                {/*<TableRowColumn><p style={{margin:'2px 0', fontSize:10}}>Detail: <Link to={LINKS.SERVICE} target="_blank">View details</Link></p>*/}
                {/*{order.detail_package.map((deta) => {*/}
                {/*return (*/}
                {/*<p key={deta.name}>{deta.name} - {deta.value}</p>*/}
                {/*)*/}
                {/*})}*/}

                {/*</TableRowColumn>*/}
                {/*<TableRowColumn></TableRowColumn>*/}
                {/*<TableRowColumn>Rp. 19.000.000.00</TableRowColumn>*/}
                {/*<TableRowColumn>Rp. 19.000.000.00</TableRowColumn>*/}
                {/*</TableRow>*/}
                {/*<TableRow>*/}
                {/*<TableRowColumn colSpan={2} ></TableRowColumn>*/}
                {/*<TableRowColumn className="align-right" >Subtotal</TableRowColumn>*/}
                {/*<TableRowColumn>Rp. 19.000.000.00</TableRowColumn>*/}
                {/*</TableRow>*/}
                {/*<TableRow>*/}
                {/*<TableRowColumn>Discount</TableRowColumn>*/}
                {/*<TableRowColumn>0.00</TableRowColumn>*/}
                {/*</TableRow>*/}
                {/*<TableRow>*/}
                {/*<TableRowColumn>Total (IDR)</TableRowColumn>*/}
                {/*<TableRowColumn>Rp. 19.000.000.00</TableRowColumn>*/}
                {/*</TableRow>*/}
                {/*<TableRow>*/}
                {/*<TableRowColumn>Total Paid (IDR)</TableRowColumn>*/}
                {/*<TableRowColumn>0.00</TableRowColumn>*/}
                {/*</TableRow>*/}
                {/*<TableRow>*/}
                {/*<TableRowColumn>Amount Due (IDR)</TableRowColumn>*/}
                {/*<TableRowColumn>Rp. 19.000.000.00</TableRowColumn>*/}
                {/*</TableRow>*/}
              </TableBody>
            </Table>
            <Divider/>

          </div>
        </Card>
        <Card>
          {/*<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>*/}
          {/*<ToolbarGroup>*/}
          {/*<ToolbarTitle actAsExpander={true}*/}
          {/*showExpandableButton={false} style={{fontSize: 14, fontWeight: 500, color: '#32325d', textTransform: 'capitalize'}}*/}
          {/*text={'Payments'}/>*/}
          {/*</ToolbarGroup>*/}

          {/*</Toolbar>*/}

          <CardHeader actAsExpander={true}
                      showExpandableButton={false} style={{paddingBottom: 16}}
                      subtitle={<a style={{fontSize: 12, paddingLeft: 10}}>Transaction History</a>}/>
          <Divider/>

          <CardText className="no-padding" expandable={true}>
            <Table selectable={false}>
              <TableHeader displaySelectAll={false}
                           adjustForCheckbox={false}
                           enableSelectAll={false}>
                <TableRow style={{height: 38, background: '#f6f9fc'}}>

                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Date</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Description</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Amount</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Status</TableHeaderColumn>
                </TableRow>
              </TableHeader>
              <TableBody displayRowCheckbox={false}>
                <TableRow>
                  <TableRowColumn>10/02/2017 22:30:10</TableRowColumn>
                  <TableRowColumn>Awaiting Approval</TableRowColumn>
                  <TableRowColumn>Rp. 3.000.000.00</TableRowColumn>
                  <TableRowColumn>Approved</TableRowColumn>
                </TableRow>
                <TableRow>
                  <TableRowColumn>10/02/2017 20:30:10</TableRowColumn>
                  <TableRowColumn>Awaiting Approval</TableRowColumn>
                  <TableRowColumn>Rp. 3.000.000.00</TableRowColumn>
                  <TableRowColumn>Pending</TableRowColumn>
                </TableRow>
              </TableBody>
            </Table>
          </CardText>
        </Card>

      </div>
    )
  }
}