import React from 'react';
import {observer, inject} from 'mobx-react';
import {Dialog, Divider, FlatButton, MenuItem, RaisedButton, SelectField, TextField} from "material-ui";

@inject('appstate')
@observer
export default class DepositFormComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      openedDialogBank : false,
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.bankStore = props.appstate.bank;
    this.depositStore = props.appstate.deposit;
    this.currency = props.appstate.currencyStore;
  }

  handlePaymentProof = (event, index, value) => {

    const file = event.nativeEvent.target.files[0];
    const allowedFile = ['jpg', 'jpeg', 'png', 'gif'];

    const [ext] = file.name.split('.').reverse();

    if (!allowedFile.includes(ext.toLowerCase())) {

    }
    this.depositStore.file = file.name;

    this.http.upload(file).then((response) => {
      this.depositStore.data.payment_proof = "/api/v1" + response.path
    });
  };

  handleOpen = () => {
    this.setState({openedDialog: true});
  };

  handleClose = () => {
    this.setState({openedDialog: false});
  };

  handleOpenBank = () => {
    this.setState({
      openedDialogBank:true
    })
  };

  handleCloseBank = () => {
    this.setState({
      openedDialogBank:false
    })
  };

  handleChangeBankName = (event) => {
    this.bankStore.data.name = event.target.value;
  };

  handleChangeCurrency = (event, index, value) => {
    this.bankStore.data.currency_id = value.id;
    this.setState({currency: value});
    console.log(this.bankStore.data.currency_id, value)
  };

  handleChangeOnBehalf = (event) => {
    this.bankStore.data.on_behalf = event.target.value;
  };

  handleChangeAccount = (event) => {
    this.bankStore.data.account_number = event.target.value;
  };

  postDataBank = () => {
    this.bankStore.post();
    this.setState({
      openedDialogBank: false,
      openedDialog:false
    });
  };

  componentDidMount() {
    this.bankStore.getAll();
    this.bankStore.getAdminBank();
    this.currency.getAll();
  }

  handleBank = (event, index, value) => {
    this.depositStore.bank = value;
    this.depositStore.data.bank_name = this.depositStore.bank.name;
    this.depositStore.data.bank_account_number = this.depositStore.bank.account_number;
    this.depositStore.data.bank_behalf_of = this.depositStore.bank.on_behalf;
  }

  handleBankAdmin = (event, index, value) => {
    this.depositStore.bankAdmin = value;
    this.depositStore.data.bank_to.id = this.depositStore.bankAdmin.id;
    this.depositStore.data.bank_to.name = this.depositStore.bankAdmin.name;
    this.depositStore.data.bank_to.account_number = this.depositStore.bankAdmin.account_number;
    this.depositStore.data.bank_to.on_behalf = this.depositStore.bankAdmin.on_behalf;
  }

  handleAmount = (event) => {
    this.depositStore.data.amount = event.target.value;
  }

  render() {
    const actionsBank = [
      <FlatButton
        label="No"
        primary={true}
        style={{marginRight: 10}}
        onClick={this.handleCloseBank}
      />,
      <RaisedButton
        label="Yes"
        primary={true}
        onClick={this.handleOpen}
      />,
    ];
    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        style={{marginRight: 10}}
        onClick={this.handleClose}
      />,
      <RaisedButton
        label="Submit"
        primary={true}
        onClick={() => this.postDataBank()}
      />,
    ];

    return (
      <div>
        <div className="row">
          <div className="col s12 m6 l6">
            <p style={{color: '#32325d', fontSize: '12px'}}>FROM BANK</p>
            <SelectField
              floatingLabelText={"Bank"}
              fullWidth={true}
              onChange={this.handleBank}
              value={this.depositStore.bank}
              hintText={this.depositStore.bank.name}
            >
              {this.bankStore.list.map(item => {
                return (<MenuItem key={item.id} value={item} primaryText={`Bank ${item.name}`}/>)
              })}
              <Divider/>
              <MenuItem key={0} value={0} style={{color: "blue"}} primaryText="Create New Bank.." onClick={this.handleOpenBank}/>
            </SelectField>
            <TextField
              type="text"
              fullWidth={true}
              floatingLabelText={"Bank Account Number"}
              disabled={true}
              underlineDisabledStyle={{borderBottom: '1px dotted rgba(0, 0, 0, 0.3)'}}
              value={this.depositStore.data.bank_account_number}
            />
            <br/>
            <TextField
              type="text"
              fullWidth={true}
              floatingLabelText={"Behalf Of"}
              disabled={true}
              underlineDisabledStyle={{borderBottom: '1px dotted rgba(0, 0, 0, 0.3)'}}
              value={this.depositStore.data.bank_behalf_of}
            />
          </div>
          <div className="col s12 m6 l6">
            <p style={{color: '#32325d', fontSize: '12px'}}>TO BANK</p>
            <SelectField
              floatingLabelText={"Bank"}
              fullWidth={true}
              value={(this.bankStore.listAdmin.length > 0) ? this.bankStore.listAdmin[0].id : 0}
              onChange={this.handleBankAdmin}
              value={this.depositStore.bankAdmin}
            >
              {this.bankStore.listAdmin.map(item => {
                return (<MenuItem key={item.id} value={item} primaryText={`Bank ${item.name}`}/>)
              })}
            </SelectField>
            <div className="listCustDetail bankDetailInformation">
              <div className="listCustDetailItem flex">
                <p className="listCustomerDetailItemKey">Bank</p>
                <code
                  className="listCustomerDetailItemValue">{this.depositStore.bankAdmin.name == '' ? "-" : this.depositStore.bankAdmin.name}</code>
              </div>
              <div className="listCustDetailItem flex">
                <p className="listCustomerDetailItemKey">Behalf of</p>
                <p
                  className="listCustomerDetailItemValue">{this.depositStore.bankAdmin.on_behalf == '' ? "--" : this.depositStore.bankAdmin.on_behalf}</p>
              </div>
              <div className="listCustDetailItem flex">
                <p className="listCustomerDetailItemKey">Account Number</p>
                <p
                  className="listCustomerDetailItemValue">{this.depositStore.bankAdmin.account_number == '' ? "--" : this.depositStore.bankAdmin.account_number}</p>
              </div>
              <div className="listCustDetailItem flex">
                <p className="listCustomerDetailItemKey">Currency</p>
                <p
                  className="listCustomerDetailItemValue">{this.depositStore.bankAdmin.account_number == '' ? "--" : "IDR"}</p>
              </div>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col s12 m6 l6">
            <TextField fullWidth={true} min="0" type={"number"} floatingLabelText={"Amount (IDR)"}
                       onChange={this.handleAmount} defaultValue={this.depositStore.data.amount}/>
          </div>
        </div>
        <div className="row">
          <div className="col s12">
            <div className="file-field input-field marginBottom18">
              <div className="btn">
                <span>File</span>
                <input type="file" onChange={(...args) => this.handlePaymentProof(...args)} accept="image/*"/>
              </div>
              <div className="file-path-wrapper">
                <input className="file-path validate" type="text"
                       placeholder="Upload the evidence (jpg,jpeg,png,gif)" value={this.depositStore.file}/>
              </div>
            </div>
          </div>
        </div>
        <Dialog
          title="Adding Bank"
          actions={actionsBank}
          modal={true}
          open={this.state.openedDialogBank}
          onRequestClose={() => this.handleCloseBank()}
        >
          <div style={{padding: 20}}>
            <div className="row">
              <div className="col s12 m6 l6">
                <p className="label-form">Name</p>
                <TextField
                  hintText=" E.g. BCA"
                  onChange={this.handleChangeBankName}
                  fullWidth={true}
                />
              </div>
              <div className="col s12 m6 l6">
                <p className="label-form">Currency</p>
                <SelectField
                  fullWidth={true}
                  value={(this.state.currency) ? this.state.currency :  (() => this.setState({currency: this.currency.currencyList[0]}))}
                  onChange={this.handleChangeCurrency}>
                  {this.currency.currencyList.map((item, index) => {
                    return (<MenuItem key={index} value={item} primaryText={item.name} />)
                  })}
                </SelectField>
              </div>
            </div>

            <div className="row">
              <div className="col s12 m6 l6">
                <p className="label-form">Account</p>
                <TextField
                  hintText=" E.g. xxxxxxxxxx"
                  onChange={this.handleChangeAccount}
                  fullWidth={true}
                  type="number"
                />
              </div>
              <div className="col s12 m6 l6">
                <p className="label-form">On Behalf</p>
                <TextField
                  hintText=" E.g. Ridwan Abadi"
                  onChange={this.handleChangeOnBehalf}
                  fullWidth={true}
                />
              </div>
            </div>
          </div>
        </Dialog>
        <Dialog
          title="Warning"
          actions={actions}
          modal={true}
          open={this.state.openedDialog}
          onRequestClose={() => this.handleClose()}
        >
          Make sure all of your data is correct before submitting.
        </Dialog>
      </div>
    )
  }
}