import React from 'react';
import {observer, inject} from 'mobx-react';

import {
  Card,
  CardActions,
  CardHeader,
  CardMedia,
  CardTitle,
  AutoComplete,
  CardText,
  FlatButton,
  List,
  ListItem,
  Divider,
  Snackbar,
  Tabs, Tab,
  RaisedButton,
  Toolbar,
  DatePicker,
  FontIcon,
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
  MenuItem,
  Toggle,
  ToolbarGroup,
  FloatingActionButton,
  ToolbarSeparator,
  IconButton,
  ToolbarTitle,
  RadioButton,
  TextField,
  Paper,
  RadioButtonGroup
} from 'material-ui';
import * as _ from 'lodash';
import "./style.scss";
import AddDialog from "./Dialog/AddDialog";
import {DIALOG} from "../../../stores/global_ui";
import {Button} from 'antd';

@inject('appstate')
@observer
export default class BankComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      bank: [{
        bank_name: 'bca',
        account_number: '0660990135',
        on_behalf: 'Tsabit Ghazwan'
      },
        {
          bank_name: 'bca',
          account_number: '0660983333',
          on_behalf: 'Hasta Ragil'
        }
      ],
      mode: 'create',
      defaultValue: {}
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.globalUI = props.appstate.globalUI;
    this.userBanks = props.appstate.userBanks;
    this.userData = props.appstate.userData;
  }

  componentDidMount() {


    // if(this.userData.role == 'store') {
    //   this.userBanks.getAllBanks();
    // }
    // else if(this.userData.role == 'administrator') {
    //   this.userBanks.getAllBanksAdmin(this.props.id);
    // }
  }

  handleOpenDialog = () => {
    this.setState({mode: 'create', defaultValue: {}});
    this.globalUI.showDialog(DIALOG.STORES.CREATE);
  }

  editAccount = (index) => {
    this.setState({
      mode: 'update',
      defaultValue: this.userBanks.banks[index]
    });
    this.globalUI.showDialog(DIALOG.STORES.CREATE);
  }

  render() {

    return (
      <div className="row">
        <AddDialog id={this.props.id}mode={this.state.mode} defaultValue={this.state.defaultValue}/>
        <div className="col l12 m12 s12">
          <Card className="animated fadeIn cardLite">
            <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
              <ToolbarGroup>
                <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Card / Bank Account'}/>
              </ToolbarGroup>
            </Toolbar>
            <Divider/>


            <div style={{padding: 15}} className="bank">
              <div className="row">
                <div className="col l4 m3 s12" onClick={() => this.handleOpenDialog()}>
                  <div className="flex add-new"
                       style={{
                         flexDirection: 'column',
                         alignItems: 'center',
                         justifyContent: 'center',
                         height: "172.5px"
                       }}>
                    <div>
                      <FontIcon className="material-icons icon-add ">add</FontIcon>
                    </div>
                    Add new bank account
                  </div>
                </div>

                {this.userBanks.banks.map((val, index) => (
                  <div className="col l4 m3 s12 "
                       onClick={() => this.editAccount(index)}>
                    <div className="account cardLite">
                      <div className="header"></div>
                      <div className="row bank_info">
                        <div className=" col l4 m4 s4 bank_logo">
                          <div className=""></div>
                        </div>
                        <div className=" col l8 m8 s8 bank_name">
                          <div className="">{_.toUpper(val.name)}</div>
                        </div>
                      </div>

                      <div className="name">
                        <p className="no-margin"><code className="item">***** {val.account_number.substr(4)}</code>
                        </p>
                        <p><code className="item">{val.on_behalf}</code></p>
                      </div>

                    </div>
                  </div>

                ))}

                {/*<div className="col l4 m3 s12 add-new" onClick={() => this.handleOpenDialog()}>*/}
                {/**/}
                {/*<div className="button-add">*/}
                {/*<FontIcon className="material-icons"*/}
                {/*style={{color: 'white', fontSize: '3.5em', marginTop: 5}}>add</FontIcon>*/}
                {/*</div>*/}
                {/*Add new bank account*/}
                {/*</div>*/}

                {/*{this.userBanks.banks.map((val, index) => (*/}
                {/*<div className="col l4 m3 s12 account marketplace-container-bank"*/}
                {/*onClick={() => this.editAccount(index)}>*/}
                {/*<div className="header"></div>*/}
                {/*<div className="row bank_info">*/}
                {/*<div className="bank_logo col l4 m4 s4">*/}
                {/*</div>*/}
                {/*<div className="bank_name col l8 m8 s8">{_.toUpper(val.name)}*/}
                {/*</div>*/}
                {/*</div>*/}
                {/*<div className="row">*/}
                {/*<div className="name">*/}
                {/*<p><code className="item">***** {val.account_number.substr(4)}</code></p>*/}
                {/*<p><code className="item">{val.on_behalf}</code></p>*/}
                {/*</div>*/}
                {/*</div>*/}
                {/*</div>*/}

                {/*))}*/}
              </div>
            </div>
          </Card>
        </div>
      </div>
    )
  }
}

