import React from 'react';
import {inject, observer} from 'mobx-react';
import {
  Card,
  CardTitle,
  Divider,
  RaisedButton,
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
  TextField,
  Toolbar,
  ToolbarGroup,
  ToolbarSeparator,
  IconButton,
  IconMenu, MenuItem,
} from 'material-ui';
import {Table as TableAntd} from 'antd';
import {startCase} from 'lodash';
import {LINKS} from "../../routes";
import {Link} from 'react-router-dom';
import SearchIcon from 'material-ui/svg-icons/action/search';
import UnarchiveIcon from 'material-ui/svg-icons/content/unarchive';
import ArchiveIcon from 'material-ui/svg-icons/content/archive';
import DC from 'decimal.js-light';
import NumberFormat from 'react-number-format';
import MoreIcon from 'material-ui/svg-icons/navigation/more-vert';
import LoadingDialog from "../LoadingDialog";
import Loader from 'react-loader-advanced';
import './style.scss';
import {DIALOG} from "../../stores/global_ui";
import EmptyComponent from '../EmptyComponent';

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

  componentDidMount() {
    // this.globalUI.openLoading();
    // this.transactionStore.getAll().then(res => {
    //   this.globalUI.closeLoading();
    // });
    // this.transactionStore.getAmount();
    // this.bankStore.getByUserID('tesss');
    // this.globalUI.closeLoading();
    // this.authStore.getWallet();
  }

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

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

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

  search = (event)=>{
    if(event.target.value.length == 0){
      this.transactionStore.isSearching = false;
    }
    else{
      this.transactionStore.isSearching = true;
      this.transactionStore.search(event.target.value);
    }
  };

  handleChangeSorter = (pagination, filters, sorter) => {
    // console.log('Various parameters', pagination, filters, sorter);
    this.setState({
      filteredInfo: filters,
      sortedInfo: sorter,
    });
  };

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

  render() {
    const voucher = <NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;
    const points = <NumberFormat value={15000} displayType={'text'} thousandSeparator={true}/>;


    const columns = [{
      title: 'Id',
      dataIndex: 'id',
      key: 'id',
      className: 'recentOrder-noOrder',
      render: (text) => <Link to={`#`} key={text}>{<span>{(text.split("-")[0])}</span>}</Link>,
    },
      {
        title: 'Date',
        dataIndex: 'created_at',
        key: 'created_at',
        className: 'recentOrder-noOrder',
        render: (text) => (
          <div>
            <span>{moment(text).format('MMM DD, YYYY')}</span> <span className='smaller lighter'>{moment(text).format('hh:mm')}</span>
          </div>
        )
      },
      {
        title: 'Type',
        dataIndex: 'type',
        key: 'type',
        className: 'recentOrder-noOrder',
        render: (text) => <span>{text.name}</span>
      },

      {
        title: 'Status',
        dataIndex: 'status',
        key: 'status',
        className: 'recentOrder-status',
        render: (text) => <div><span>{text === 'created' ? 'Waiting Approval' : startCase(text)}</span></div>
      },
      {
        title: 'Amount',
        dataIndex: 'amount',
        key: 'amount',
        className: 'recentOrder-customer bolder green',
        render: (text) => {
          return <NumberFormat
            value={new DC(text).toNumber()} displayType={'text'}
            thousandSeparator={true} prefix={'Rp. '}/>

        }

      }];

    return (
      <div className="wallet containerMiddle">
        <div className="row">
          <div className="col s12">
            <div style={{marginBottom: '16px'}}>
              <h3 className="headerMenu">Wallet</h3>
            </div>
          </div>
          {
            (this.transactionStore.saldo.length === 2) ?
              <div>
                <div className="col s6 m6">
                  <Card className="cardLite row">
                    <CardTitle titleStyle={{color:'#6772e5'}} title={voucher} subtitle="Voucher"/>
                  </Card>
                </div>
                <div className="col s6 m6">
                  <Card className="cardLite row">
                    <CardTitle titleStyle={{color:'#6772e5'}} title={points} subtitle="Points"/>
                  </Card>
                </div>
              </div>
              :
              <div className="col s12 m12">
                <Card className="cardLite row">
                  <CardTitle title={voucher} subtitle="Your Voucher"/>
                </Card>
                <Card className="cardLite row">
                  <CardTitle title={points} subtitle="Your Points"/>
                </Card>
              </div>
          }

          <div className="col s12">
            <Card className="cardLite" style={{paddingBottom: 5}}>
              <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                <ToolbarGroup>
                  <SearchIcon style={{marginRight: 8, color: "#999"}}/>
                  <TextField
                    hintText="Search Transaction"
                    style={{fontSize: 14}}
                    hintStyle={{fontSize: 14}}
                    fullWidth={true}
                    underlineShow={false}
                  />
                </ToolbarGroup>
                <ToolbarGroup className="ToolbarGroupLast">
                  <ToolbarSeparator/>
                  {(window.innerWidth < 600) ?
                    <div className="flexSpaceBetween">
                      <IconMenu
                        iconButtonElement={<IconButton><MoreIcon/></IconButton>}
                        anchorOrigin={{horizontal: 'left', vertical: 'top'}}
                        targetOrigin={{horizontal: 'left', vertical: 'top'}}
                      >
                        <MenuItem primaryText="Deposit"
                                  onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}/>
                        <MenuItem primaryText="Withdrawal"
                                  onClick={() => this.globalUI.showDialog(DIALOG.WALLET.WITHDRAW)}/>
                      </IconMenu>
                    </div>
                    :
                    <div>
                      {/*<RaisedButton*/}
                        {/*className=""*/}
                        {/*icon={<UnarchiveIcon/>}*/}
                        {/*label="Deposit"*/}
                        {/*style={{marginRight: 20}}*/}
                        {/*onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}*/}
                        {/*primary={true}/>*/}
                      <RaisedButton
                        className="ToolbarGroupLastButton"
                        icon={<UnarchiveIcon/>}
                        label="Top Up"
                        // onClick={() => this.globalUI.showDialog(DIALOG.WALLET.WITHDRAW)}
                        primary={true}/>
                    </div>
                  }

                </ToolbarGroup>
              </Toolbar>
              <Divider/>
              <div>
                <Loader show={this.globalUI.loadingVisibility} message={<LoadingDialog/>}
                        messageStyle={{textAlign: 'center'}}
                        backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
                  <TableAntd
                    pagination={true}
                    className='table-padded'
                    dataSource={this.transactionStore.isSearching ? this.transactionStore.transactionListFiltered : this.transactionStore.list}
                    onChange={this.handleChangeSorter}
                    columns={columns}
                    // onRow={(record) => {`
                    //   return {
                    //     onClick: () => {
                    //       this.props.history.push(`${LINKS.ORDER}/${record.id}`);
                    //     },       // click row
                    //   };
                    // }}
                  />
                  {/*<Table selectable={false}>*/}
                    {/*<TableHeader displaySelectAll={false}*/}
                                 {/*adjustForCheckbox={false}*/}
                                 {/*enableSelectAll={false}>*/}
                      {/*<TableRow style={{height: 38, background: '#f6f9fc'}}>*/}
                        {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
                                           {/*style={{height: 'auto',width:'13%'}}>Id</TableHeaderColumn>*/}
                        {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
                                           {/*style={{height: 'auto'}}>Date</TableHeaderColumn>*/}
                        {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
                                           {/*style={{height: 'auto'}}>Type</TableHeaderColumn>*/}
                        {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
                                           {/*style={{height: 'auto'}}>Status</TableHeaderColumn>*/}
                        {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
                                           {/*style={{height: 'auto'}}>Amount</TableHeaderColumn>*/}
                      {/*</TableRow>*/}
                    {/*</TableHeader>*/}
                    {/*<TableBody displayRowCheckbox={false}>*/}
                      {/*{*/}
                        {/*(this.transactionStore.isSearching ? this.transactionStore.transactionListFiltered : this.transactionStore.list).map((item, index) => {*/}

                          {/*return (*/}
                            {/*<TableRow key={index}>*/}
                              {/*<TableRowColumn style={{width:'13%'}}>*/}
                                {/*{item.id.split('-')[0]}*/}
                              {/*</TableRowColumn>*/}
                              {/*<TableRowColumn>{moment(item.created_at).format('MMMM Do YYYY, hh:mm:ss')}</TableRowColumn>*/}
                              {/*<TableRowColumn>{item.type.name}</TableRowColumn>*/}
                              {/*<TableRowColumn>{item.status === 'created' ? 'Waiting Approved' : item.status}</TableRowColumn>*/}
                              {/*<TableRowColumn><NumberFormat value={item.amount} displayType={'text'}*/}
                                                            {/*thousandSeparator={true}*/}
                                                            {/*prefix={'IDR '}/></TableRowColumn>*/}
                            {/*</TableRow>*/}
                          {/*);*/}
                        {/*})*/}
                      {/*}*/}
                      {/*{*/}
                        {/*(this.transactionStore.list.length === 0) ?*/}
                          {/*<TableRow>*/}
                            {/*<TableRowColumn>*/}
                              {/*<EmptyComponent type="empty" header="" content="There is no data in sight"/>*/}
                            {/*</TableRowColumn>*/}
                          {/*</TableRow> : ""*/}
                      {/*}*/}
                    {/*</TableBody>*/}
                  {/*</Table>*/}
                </Loader>
              </div>
            </Card></div>
        </div>


      </div>
    )
  }
}
