import React from 'react';
import {inject, observer} from 'mobx-react';
import {DatePicker, MenuItem, SelectField, TextField, Checkbox, } from 'material-ui';
import { Upload, Icon, Modal, Input, Select, Switch, message, Button as ButtonAntd } from 'antd';
import schema from 'async-validator'
import startCase from 'lodash.startcase';
import moment from 'moment';
import get from 'lodash.get';
import NumberFormat from 'react-number-format';

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

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
        formData: Object.assign({
          name : '',
          // icon : '',
          // background_image : ''
        },props.defaultValue ) || {},
        checked: true,
        errorText: {},
        onChangeTimeoutId: false,
        countries: [],
    };

    this.http = props.appstate.http;
    this.orderStore = props.appstate.order;

  }

  // componentWillUnmount(){

  // }

  componentDidMount() {
    const {defaultValue={}} = this.props;

    this.setState({
      formData : {
        ...this.state.formData,
        ...defaultValue
      }
    })


  }

  triggerOnChange() {
    this.props.onChangeData(this.state.formData);
    // if (this.state.onChangeTimeoutId) {
    //   this.setState({
    //     onChangeTimeoutId: false
    //   });
    //   return clearTimeout(this.state.onChangeTimeoutId);
    // }

    // const onChangeTimeoutId = setTimeout(() => {
    //   if (this.props.onChangeData && typeof this.props.onChangeData === 'function') {
    //     this.props.onChangeData(this.state.formData);
    //   }

    //   this.setState({
    //     onChangeTimeoutId: false
    //   });

    // }, 322);

    // this.setState({onChangeTimeoutId});
  }

  updateCheck() {
    this.setState((oldState) => {
      return {
        checked: !oldState.checked,
      };
    });
  }

  render() {

    const wrapperText = key => ele => React.cloneElement(ele, {
      value: this.state.formData[key],
      errorText: this.state.errorText[key],
  	  onChange: (e) => {
        if(["preorder_price", "preorder_weight"].includes(key)){
          let data = this.state.formData;
          let weight = (e.target.value.indexOf("-") > -1) ? 0 : parseInt(e.target.value.replace(/,/g,''),10);
          data.preorder_price = parseInt(data.regular_price * (weight/1000));
          this.setState({
            formData: {
              ...data,
              [key]: weight,
            }
          }, () => this.triggerOnChange());
        }
        else{
          this.setState({
            formData: {
              ...this.state.formData,
              [key]: e.target.value,
            }
          }, () => this.triggerOnChange());
        }
      }
    });

    const wrapperSelect = key => ele => React.cloneElement(ele, {
      value: this.state.formData[key],
      errorText: this.state.errorText[key],
      onChange: (e, k, v) => {
        this.setState({
          formData: {
            ...this.state.formData,
            [key]: v,
          }
        }, () => this.triggerOnChange());
      }
    });

    const wrapperSwitch = key => ele => React.cloneElement(ele, {
      checked: this.state.formData[key],
      errorText: this.state.errorText[key],
      onCheck: (e, v) => {
        this.setState({
          formData: {
            ...this.state.formData,
            [key]: v,
          }
        }, () => this.triggerOnChange());
      }
    });

    const {mode="create"} = this.props;

    return(
      <div style={{
        paddingTop: 10
      }}>

        <div className="row">

          <div className="col s6 m6 l6">
            <div style={{backgroundColor:'#f3f3f7', padding:'8px 12px 0',  borderRadius:'4px'}}>
              <p className="label-form" style={{margin:0, color: '#3E4B5B', fontWeight:'500',fontSize:'.9rem'}}>Quantity request by gram</p>
              {wrapperText("preorder_buyer_note")(
                <TextField
                fullWidth={true}
                underlineDisabledStyle={{display:'none'}}
                multiLine={true}
                textareaStyle={{fontSize:'.9rem', color: '#3E4B5B'}}
                rows={1}
                disabled={true}/>
              )}
            </div>
          </div>
          <div className="col s6 m6 l6">
            <div style={{backgroundColor:'#f3f3f7', padding:'8px 12px 0',  borderRadius:'4px'}}>
              <p className="label-form" style={{margin:0, color: '#3E4B5B', fontWeight:'500',fontSize:'.9rem'}}>Stock Available (Gram)</p>
              {wrapperText("item_stock_available")(
                <TextField
                fullWidth={true}
                underlineDisabledStyle={{display:'none'}}
                multiLine={true}
                textareaStyle={{fontSize:'.9rem', color: '#3E4B5B'}}
                rows={1}
                disabled={true}/>
              )}
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col s12 m12 l12">
            <div style={{}}>
              <p className="label-form" style={{margin:0, color: '#3E4B5B', fontWeight:'500', marginBottom:4, fontSize:'.9rem'}}>Your Note</p>
              {wrapperText("preorder_store_note")(
                <TextField
                fullWidth={true}
                multiLine={true}
                rows={1}
                style={{border: "2px solid #dde2ec", borderRadius:'4px',  padding:'0px 8px 0 8px', fontSize:14, minheight: '32px'}}
                textareaStyle={{marginTop:8, fontSize:14, minheight: '32px'}}
                underlineShow={false}
                hintText="Add notes for buyer"/>
              )}
            </div>
          </div>
        </div>


        <div className="row">
          <div className="col s6 m6 l6">
            <div>
              <p className="label-form" style={{margin:0, color: '#3E4B5B', fontWeight:'500', marginBottom:4, fontSize:'.9rem'}}>Price @kilogram</p>
              {wrapperText("preorder_price")(
                <NumberFormat disabled={true} thousandSeparator={true} style={{ width:'100%', color: '#3E4B5B', padding: '4px 11px', height: '32px', fontSize: '14px', border: "2px solid #dde2ec", borderRadius:'4px', backgroundColor:'#f3f3f7' }} placeholder="E.g. 50000" />
              )}
            </div>
          </div>
          <div className="col s6 m6 l6">
            <div>
              <p className="label-form" style={{margin:0, color: '#3E4B5B', fontWeight:'500', marginBottom:4, fontSize:'.9rem'}}>Quantity by gram</p>
              {wrapperText("preorder_weight")(
                <NumberFormat thousandSeparator={true} style={{width:'100%', padding: '4px 11px',  color: '#3E4B5B', height: '32px', fontSize: '14px', border: "2px solid #dde2ec", borderRadius:'4px'}} placeholder="E.g. 5" />
              )}
            </div>
          </div>
        </div>
      </div>
    );

  }

}
