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';

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

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
        formData: Object.assign({
          name : '',
          email : '',
          role_id:'',
        },props.defaultValue ) || {},
        checked: true,
        errorText: {},
        onChangeTimeoutId: false,
        countries: [],
        previewVisible : '', 
        previewImage : '', 
        fileList : '',
        previewVisibleBackground : '', 
        previewImageBackground : '', 
        fileListBackground : '',
        displayColorPicker: false,
        tagColor:''
      };
    this.http = props.appstate.http;
    this.rolesStore = props.appstate.roles;
  }

  // componentWillUnmount(){
    
  // }

  componentDidMount() {
    const {defaultValue={}} = this.props;
    
    // this.rolesStore.getList().then(res => {
    //   this.globalUI.closeLoading();
    // });

    this.setState({
      formData : {
        ...this.state.formData,
        ...defaultValue
      }
    }, () => this.triggerOnChange(2))
  }

  handleChangeRole = (event, index, value) => {
    this.setState({
        formData : {
          ...this.state.formData,
          role_id:value
        },
      },()=>this.triggerOnChange(2))
  };

  triggerOnChange(key) {
    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 { previewVisible, previewImage, fileList,previewVisibleBackground, previewImageBackground, fileListBackground } = this.state;

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

    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(key));
      }
    });

    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(key));
      }
    });

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

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

        <div className="row">
          <div className="col s128 m6 l6">
            <div>
              <p className="label-form">Name</p>
              {wrapperText("name")(
                <TextField
                fullWidth={true}
                hintText="E.g. Indah Kencana"/>
              )}
            </div>
          </div>
          <div className="col s12 m6 l6">
            {(mode === "create") ? 
              <div>
                <p className="label-form">Email</p>
                {wrapperText("email")(
                  <TextField
                  fullWidth={true}
                  hintText="E.g. indahkencana@gmail.com"/>
                )}
              </div>
             : ""}
          </div>
        </div>
        {/*<div className="row">
          <div className="col s12 m6 l6">
            <p className="label-form">Role</p>
            <SelectField
              value={this.state.formData.role_id}
              onChange={this.handleChangeRole}
              fullWidth={true}
            >
              {this.rolesStore.list.map((item, index) => {
                (<MenuItem value={item.id} primaryText={item.name} />)
              })}
            </SelectField>
          </div>
        </div>*/}
      </div>
    );

  }

}
