import React from 'react';
import {inject, observer} from 'mobx-react';
import {DatePicker, MenuItem, SelectField, TextField, Checkbox,
  AutoComplete, } 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';

const InputGroup = Input.Group;
const { TextArea } = Input;

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

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

    };
    this.categoryStore = props.appstate.category;
    this.http = props.appstate.http;
  }

  // componentWillUnmount(){

  // }

  async componentDidMount() {
    const {defaultValue={},mode} = this.props;
    await this.categoryStore.getCategoryList();
  }


  triggerOnChange(key) {
    this.props.onChangeData(this.state.formData);
  }

  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) => {

        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 wrapperAutocomplete = key => ele => React.cloneElement(ele, {
      value : this.state.formData[key],
      onNewRequest: (v) => {
        this.setState({
          formData: {
            ...this.state.formData,
            [key]: v.id,
          }
        }, () => this.triggerOnChange(key));
      }
    });

    const {mode="create"} = this.props;
    const dataSourceConfig = {
      text: 'name',
      value: 'id',
    };
    return(
      <div style={{marginTop: 10}}>
        <div className={"row"}>
          <div className={"col s12"}>
            <div>
              <p className="label-form">Item Name</p>
              {wrapperAutocomplete("category_id")(
                <AutoComplete
                  hintText="E.g. Fashion Pria"
                  dataSource={this.categoryStore.categoryList.slice()}
                  filter={AutoComplete.fuzzyFilter}
                  dataSourceConfig={dataSourceConfig}
                  openOnFocus={true}
                  fullWidth={true}
                />
              )}
            </div>
          </div>
        </div>

      </div>
    );

  }

}
