import React from 'react';
import {inject, observer} from 'mobx-react';
import {Link} from 'react-router';
import { Affix, Card, Slider, Select, Menu, Spin } from 'antd';
import {Tab, Tabs} from 'material-ui';
import './style.scss';
import All from "./All/index";

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const Option = Select.Option;
@inject('appstate')
@observer
export default class ItemsComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      valueMinimal: 0,
      valueMaximal: 0,
      isLoading: false
    };
    this.defaultState = Object.assign({}, this.state);
  }

  componentDidMount() {
  }

  handleChangeMinimal = (valueMinimal) => {
    this.setState({ valueMinimal });
  };

  handleChangeMaximal = (valueMaximal) => {
    this.setState({ valueMaximal });
  };

  handleChange = (value) => {
    console.log(`selected ${value}`);
  }

  handleBlur = () => {
    console.log('blur');
  }

  handleFocus = () => {
    console.log('focus');
  }

  render() {
    const { valueMinimal, valueMaximal } = this.state;

    return (
      <div className="setting">
        <div className="row">
          <div className="col l3 m3 s3 no-padding">
            <Affix offsetTop={90}>
              <Card title="Category" bordered={true} style={{ width: '100%' }}>
                <Menu onClick={() => {
                  this.setState({isLoading: true});

                  setTimeout(() => {
                    this.forceUpdate();
                    this.setState({isLoading: false});
                  }, 2500);
                }} style={{
                  border: '0px'
                }} mode="vertical">
                  <SubMenu key="sub1" title={<span><span>Fashion</span></span>}>
                    <SubMenu key={'sub1a'} title={'Woman'}>
                      <Menu.Item key="1a">Dress</Menu.Item>
                      <Menu.Item key="2a">Outwear</Menu.Item>
                      <Menu.Item key="3a">Pyjamas</Menu.Item>
                      <Menu.Item key="4a">Jacket</Menu.Item>
                      <Menu.Item key="5a">Shoes</Menu.Item>
                    </SubMenu>
                    <SubMenu key={'sub1b'} title={'Man'}>
                      <Menu.Item key="1b">Batik</Menu.Item>
                      <Menu.Item key="2b">Outwear</Menu.Item>
                      <Menu.Item key="3b">Suit</Menu.Item>
                      <Menu.Item key="4b">Jacket</Menu.Item>
                      <Menu.Item key="5b">Shoes</Menu.Item>
                    </SubMenu>
                    <SubMenu key={'sub1c'} title={'Costume'}>
                      <Menu.Item key="1c">Man</Menu.Item>
                      <Menu.Item key="2c">Woman</Menu.Item>
                      <Menu.Item key="3c">Child</Menu.Item>
                    </SubMenu>
                  </SubMenu>
                  <SubMenu key="sub2" title={<span><span>Phone, Tablet & Gadget</span></span>}>
                    <SubMenu key={'sub2a'} title={'Smartphone'}>
                      <Menu.Item key="1a">iPhone</Menu.Item>
                      <Menu.Item key="2a">Samsung</Menu.Item>
                      <Menu.Item key="3a">Meizu</Menu.Item>
                      <Menu.Item key="4a">Xiaomi</Menu.Item>
                      <Menu.Item key="5a">Oppo</Menu.Item>
                    </SubMenu>
                    <SubMenu key={'sub2b'} title={'Feature Phone'}>
                      <Menu.Item key="1a">Samsung</Menu.Item>
                      <Menu.Item key="2a">Nokia</Menu.Item>
                      <Menu.Item key="3a">Other Basic</Menu.Item>
                    </SubMenu>
                    <SubMenu key={'sub2c'} title={'Accessories'}>
                      <Menu.Item key="1a">Casing</Menu.Item>
                      <Menu.Item key="2a">Battery and Charging Component</Menu.Item>
                      <Menu.Item key="3a">Screen Shield</Menu.Item>
                    </SubMenu>
                  </SubMenu>
                  <SubMenu key="sub3" title={<span><span>Computer, Office & Peripherals</span></span>}>
                    <SubMenu key={'sub3a'} title={'Laptop'}>
                      <Menu.Item key="1a">MacBook</Menu.Item>
                      <Menu.Item key="2a">Notebook</Menu.Item>
                      <Menu.Item key="3a">Premium & Ultra Book</Menu.Item>
                      <Menu.Item key="4a">Business</Menu.Item>
                      <Menu.Item key="5a">Gaming</Menu.Item>
                    </SubMenu>
                    <SubMenu key={'sub3b'} title={'PC'}>
                      <Menu.Item key="1a">Mac</Menu.Item>
                      <Menu.Item key="2a">Desktop</Menu.Item>
                      <Menu.Item key="3a">Mini PC</Menu.Item>
                      <Menu.Item key="4a">Gaming</Menu.Item>
                      <Menu.Item key="5a">Server</Menu.Item>
                    </SubMenu>
                    <SubMenu key={'sub3c'} title={'Accessories'}>
                      <Menu.Item key="1a">Mouse</Menu.Item>
                      <Menu.Item key="2a">Keyboard</Menu.Item>
                      <Menu.Item key="3a">Headphone</Menu.Item>
                      <Menu.Item key="4a">Other</Menu.Item>
                    </SubMenu>
                  </SubMenu>
                </Menu>
                {/*<p>Min. Points</p>*/}
                {/*<Slider max={1000} onChange={this.handleChangeMinimal} value={valueMinimal} />*/}

                {/*<p>Max. Points</p>*/}
                {/*<Slider max={1000} onChange={this.handleChangeMaximal} value={valueMaximal} />*/}

                {/*<p style={{marginTop: 25}}>Category</p>*/}
                {/*<Select*/}
                  {/*showSearch*/}
                  {/*style={{ width: '100%' }}*/}
                  {/*placeholder="Select a category"*/}
                  {/*optionFilterProp="children"*/}
                  {/*onChange={this.handleChange}*/}
                  {/*onFocus={this.handleFocus}*/}
                  {/*onBlur={this.handleBlur}*/}
                  {/*// filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}*/}
                {/*>*/}
                  {/*<Option value="jack">Electronic</Option>*/}
                  {/*<Option value="lucy">Fashion</Option>*/}
                  {/*<Option value="tom">Food</Option>*/}
                {/*</Select>*/}
              </Card>
            </Affix>
          </div>
          <div className="col l9 m9 s9 no-padding">
            <Spin spinning={this.state.isLoading} delay={500}>
              <All/>
            </Spin>
          </div>
        </div>
      </div>
    )
  }
}
