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 NumberFormat from 'react-number-format';

@inject('appstate')
@observer
export default class DepositWithdraw 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;
    this.globalUI = props.appstate.globalUI;
  }

  componentDidMount() {
    
  }

  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,
      },
    };


    return (
      <div>

        <Card className="row">

          <div className="flexSpaceBetween" style={{padding: 16, marginLeft: 15}}>
            <div className="">
              <CardTitle style={{padding: 0, fontSize: 22}}
                         titleStyle={{fontSize: 22, textTransform: 'capitalize'}}
                         title={this.transactionStore.detail.type}
              />
                <div className="listCustDetail">
                  <div className="listHeaderCustDetailItem flex">
                    <p className="listHeaderCustomerDetailItemKey">Status</p>
                    <p className="listHeaderCustomerDetailItemValue"><code style={{textTransform: 'capitalize'}}>{this.transactionStore.detail.status === 'created' ? 'Waiting Approved' : this.transactionStore.detail.status}</code></p>
                  </div>
                  <div className="listHeaderCustDetailItem flex">
                    <p className="listHeaderCustomerDetailItemKey">Amount</p>
                    <p className="listHeaderCustomerDetailItemValue"><NumberFormat value={this.transactionStore.detail.amount} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /></p>
                  </div>
                  <div className="listHeaderCustDetailItem flex">
                    <p className="listHeaderCustomerDetailItemKey">{this.transactionStore.detail.status=='rejected' ? "Reject Reason" : ""}</p>
                    <p className="listHeaderCustomerDetailItemValue">{this.transactionStore.detail.status=='rejected' ? this.transactionStore.detail.reject_reason : ""}</p>
                  </div>
                  <div className="listHeaderCustDetailItem flex">
                    <p className="listHeaderCustomerDetailItemKey">Request Date</p>
                    <p className="listHeaderCustomerDetailItemValue">{moment(this.transactionStore.detail.created_at).format('MMMM Do YYYY, H:mm')}</p>
                  </div>
                  <div className="listHeaderCustDetailItem flex">
                    <p className="listHeaderCustomerDetailItemKey">{this.transactionStore.detail.status=='rejected' ? "Rejected Date" : ""}</p>
                    <p className="listHeaderCustomerDetailItemValue">{this.transactionStore.detail.status=='rejected' ? moment(this.transactionStore.detail.updated_at).format('MMMM Do YYYY, H:mm') : ""}</p>
                  </div>
                  <div className="listHeaderCustDetailItem flex">
                    <p className="listHeaderCustomerDetailItemKey">{this.transactionStore.detail.status=='approved' ? "Approved Date" : ""}</p>
                    <p className="listHeaderCustomerDetailItemValue">{this.transactionStore.detail.status=='approved' ? moment(this.transactionStore.detail.updated_at).format('MMMM Do YYYY, H:mm') : ""}</p>
                  </div>
                </div>
            </div>
          </div>

              <Divider />

          <div style={{marginTop: 30, marginLeft: 20}}>
            <div className="row">
              <div className="col s6">
                <h3>{this.transactionStore.detail.type == 'deposit' ? "From" : "To"}</h3>
              </div>
              <div className="col s6">
                <h3>{this.transactionStore.detail.type == 'deposit' ? "To" : ""}</h3>
              </div>
            </div>

            <div className="row">
              <div className="col s6">
                <div className="listCustDetail">
                  <div className="listHeaderCustDetailItem flex">
                    <p className="listHeaderCustomerDetailItemKey">Bank Name</p>
                    <p className="listHeaderCustomerDetailItemValue"><code style={{textTransform: 'capitalize'}}>{`Bank ${this.transactionStore.detail.bank_name}`}</code></p>
                  </div>
                  <div className="listHeaderCustDetailItem flex">
                    <p className="listHeaderCustomerDetailItemKey">Account Number</p>
                    <p className="listHeaderCustomerDetailItemValue">{this.transactionStore.detail.bank_account_number}</p>
                  </div>
                  <div className="listHeaderCustDetailItem flex">
                    <p className="listHeaderCustomerDetailItemKey">{this.transactionStore.detail.type == 'deposit' ? "Behalf Of" : ""}</p>
                    <p className="listHeaderCustomerDetailItemValue">{this.transactionStore.detail.type == 'deposit' ? this.transactionStore.detail.bank_behalf_of : ""}</p>
                  </div>
                </div>
              </div>
              <div className="col s6">
                <div className="listCustDetail">
                  <div className="listHeaderCustDetailItem flex">
                    <p className="listHeaderCustomerDetailItemKey">{this.transactionStore.detail.type == 'deposit' ? "Bank Name" : ""}</p>
                    <p className="listHeaderCustomerDetailItemValue"><code style={{textTransform: 'capitalize'}}>{this.transactionStore.detail.type == 'deposit' ? `Bank ${this.transactionStore.detail.bank_to.name}` : ""}</code></p>
                  </div>
                  <div className="listHeaderCustDetailItem flex">
                    <p className="listHeaderCustomerDetailItemKey">{this.transactionStore.detail.type == 'deposit' ? "Account Number" : ""}</p>
                    <p className="listHeaderCustomerDetailItemValue">{this.transactionStore.detail.type == 'deposit' ? this.transactionStore.detail.bank_to.account_number : ""}</p>
                  </div>
                  <div className="listHeaderCustDetailItem flex">
                    <p className="listHeaderCustomerDetailItemKey">{this.transactionStore.detail.type == 'deposit' ? "Behalf Of" : ""}</p>
                    <p className="listHeaderCustomerDetailItemValue">{this.transactionStore.detail.type == 'deposit' ? this.transactionStore.detail.bank_to.on_behalf : ""}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </Card>

      </div>
    )
  }
}
