import React from 'react';
import {inject, observer} from 'mobx-react';
import {
  MenuItem,
  SelectField,
  Table,
  TableRow,
  TableRowColumn,
  TableHeader,
  TableHeaderColumn,
  TableBody
} from 'material-ui';

import '../style.scss';

@inject('appstate')
@observer
export default class PaymentForm extends React.Component {

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      payment: null
    };
    // this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.packageStore = props.appstate.packages;
    this.packageService = props.appstate.packageServiceStore;
    this.packagePaymentStore = props.appstate.packagePaymentMethod;
    this.paymentMethodStore = props.appstate.paymentMethod;
  }

  handlePayment = (event, index, value) => {
    this.setState({
      payment: value
    });

    if (value != null) {
      this.packageService.postData.payment_method_id = value;
      this.paymentMethodStore.getById(value);
    }
    else {
      this.paymentMethodStore.reset();
    }
  };

  componentDidMount() {
    this.packagePaymentStore.getPackagePaymentMethodByPackageId(this.packageStore.packageId);
    this.paymentMethodStore.reset();
  }

  render() {

    const payment = [
      <MenuItem key={0} value={0} primaryText="Choose Method"/>,
      <MenuItem key={1} value={1} primaryText="Cash"/>,
      <MenuItem key={2} value={2} primaryText="Credit"/>,
    ];

    return (
      <div style={{
        padding: 30
      }}>
        <div className="row">
          <div className="col s12">
            <div>
              <p className="label-form">Payment Option</p>
              <SelectField
                value={this.state.payment}
                onChange={this.handlePayment}
              >
                {(this.packagePaymentStore.packagePaymentMethodList.map(row => {
                  return (
                    <MenuItem value={row.payment_method_id} primaryText={row.name}/>
                  )
                }))}
              </SelectField>
            </div>
          </div>
        </div>


        {
          (this.paymentMethodStore.isDetailEmpty) ?
            <div></div>
            :
            <div className="row">
              <div className="row">
                <div className="col s12">
                  <h4>Payment Detail</h4>
                </div>
              </div>
              <div>
                <div className="row">
                  <div className="col s12 l4">
                    Name
                  </div>
                  <div className="col s12 l8">
                    {this.paymentMethodStore.paymentMethodDetail.name}
                  </div>
                </div>
                <div className="row">
                  <div className="col s12 l4">
                    Type
                  </div>
                  <div className="col s12 l8">
                    {this.paymentMethodStore.paymentMethodDetail.type}
                  </div>
                </div>
                <div className="row">
                  <div className="col s12 l4">
                    Discount
                  </div>
                  <div className="col s12 l8">
                    {this.paymentMethodStore.paymentMethodDetail.discount}{(this.paymentMethodStore.paymentMethodDetail.discount_type == 'Percentage') ? '%' : ',00'}
                  </div>
                </div>
                <div className="row">
                  <div className="col s12 l4">
                    Penalty
                  </div>
                  <div className="col s12 l8">
                    Customer must
                    pay {this.paymentMethodStore.paymentMethodDetail.pinalty}{(this.paymentMethodStore.paymentMethodDetail.pinalty_type == 'Percentage') ? '%' : ',00'}
                    if failed pay installment on time
                  </div>
                </div>
                <div className="row">
                  <div className="col s12 l4">
                    Downpayment
                  </div>
                  <div className="col s12 l8">
                    {this.paymentMethodStore.paymentMethodDetail.downpayment + '% from package price'}
                  </div>
                </div>
                <div className="row">
                  <div className="col s12 l12">
                    Canceling the order
                    <p style={{marginTop: 10}}>
                      If customer decide to cancel the order after payment, there are rules applied for some condition.
                      rules are listed below.
                    </p>
                  </div>
                </div>
                <div className="row">
                  <div className="col s12 l12">
                    <Table selectable={false}>
                      <TableHeader displaySelectAll={false}
                                   adjustForCheckbox={false}
                                   enableSelectAll={false}>
                        <TableRow style={{height: 38, background: '#f6f9fc'}}>
                          <TableHeaderColumn style={{height: 'auto', width: '38%'}}>Cancel Period</TableHeaderColumn>
                          <TableHeaderColumn style={{height: 'auto', width: '18%'}}>Money Return</TableHeaderColumn>
                          <TableHeaderColumn style={{height: 'auto'}}>Change Package*</TableHeaderColumn>
                          <TableHeaderColumn style={{height: 'auto'}}>Change Date**</TableHeaderColumn>
                        </TableRow>
                      </TableHeader>
                      <TableBody displayRowCheckbox={false}>
                        {this.paymentMethodStore.paymentMethodDetail.cancelation_rules.map((item, index) => {
                          return (
                            <TableRow key={item.id}>
                              <TableRowColumn style={{width: '38%'}}>From {item.period.from} to {item.period.to} </TableRowColumn>
                              <TableRowColumn style={{width: '18%'}}>{item.money_return}%</TableRowColumn>
                              <TableRowColumn>{(item.change_package == true) ? 'Yes' : 'No'}</TableRowColumn>
                              <TableRowColumn>{(item.change_date == true) ? 'Yes' : 'No'}</TableRowColumn>
                            </TableRow>
                          );
                        })

                        }
                      </TableBody>
                    </Table>
                  </div>
                </div>
                <div className="row">
                  <div className="col s12 l12">
                    <p>* : Can change to other package if cancel the order but money wouldn't return</p>
                    <p>** : Can change to other schedule of the same package if cancel the order but money wouldn't
                      return</p>
                  </div>
                </div>
              </div>
            </div>
        }
      </div>
    );

  }

}
