import './demo1.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Search from '..';
import { ConfigProvider, Menu, Radio } from '../..';

function onSearch(v) {
  console.log(v);
}

const dataSource = [
  {
    label: 'Recent label',
    value: 'Recent',
  },
  {
    label: 'dress label',
    value: 'dress',
  },
  {
    label: 'sunglasses label',
    value: 'sunglasses',
  },
  {
    label: 't-shirt label',
    value: 't-shirt',
  },
];

const sizeList = [{
  value: 'large',
  label: 'large',
}, {
  value: 'medium',
  label: 'medium',
}, {
  value: 'small',
  label: 'small',
}, {
  value: 'xs',
  label: 'xs',
}];

const typeList = [{
  value: 'normal',
  label: 'normal',
}, {
  value: 'brand',
  label: 'brand',
}, {
  value: 'dark',
  label: 'dark',
}];

const disabledList = [{
  value: true,
  label: 'true',
}, {
  value: false,
  label: 'false',
}];

const themeList = [{
  value: 'white',
  label: 'white',
}, {
  value: 'grey',
  label: 'grey',
}];

const menuData = [
  {
    label: 'Products',
    value: 'Products',
  },
  {
    label: 'Products1',
    value: 'Products1',
  },
  {
    label: 'Products2',
    value: 'Products2',
  },
  {
    label: 'Products3',
    value: 'Products3',
  },
  {
    label: 'Products4',
    value: 'Products4',
  },
  {
    label: 'Products5',
    value: 'Products5',
  },
  {
    label: 'Products6',
    value: 'Products6',
  },
  {
    label: 'Products7',
    value: 'Products7',
  },
  {
    label: 'Products8',
    value: 'Products8',
  },
  {
    label: 'Products9',
    value: 'Products9',
  },
  {
    label: 'Products10',
    value: 'Products10',
  },
  {
    label: 'Suppliers1111111111',
    value: 'Suppliers1111111111',
  },
];

interface IState {
  size: 'large' | 'medium' | 'small' | 'xs';
  value: string,
  disabled: boolean,
  theme: 'white' | 'grey',
  type: 'normal' | 'brand' | 'dark',
  menuData: {
    label: string;
    value: string;
  }[];
}

class App extends React.Component<{}, IState> {
  constructor(props) {
    super(props);
    this.state = {
      size: 'large',
      menuData,
      value: '',
      disabled: false,
      theme: 'white',
      type: 'normal',
    };
  }

  handleSize = size => {
    this.setState({ size });
  };

  handleDisabled = disabled => {
    this.setState({ disabled });
  };

  handleTheme = theme => {
    this.setState({ theme });
  };

  handleType = type => {
    this.setState({ type });
  };

  onSearch = (value, filterValue) => {
    console.log(value, filterValue);
  };

  onChange = value => {
    this.setState({
      value,
    });
  };

  // value is filter value，obj is the search value
  onFilterChange(value) {
    console.log(value);
  }

  renderMenu() {
    const menuData = this.state.menuData;

    return (<Menu onSelect={this.onFilterChange.bind(this)} rtl className="diy-menu" selectMode="single">
      <Menu.Group label="Recent" key="xxx">
        {menuData.map(item => {
          return (<Menu.Item key={item.value}>
            {item.label}
          </Menu.Item>);
        })}
      </Menu.Group>
    </Menu>);
  }

  render() {
    const { size, disabled, theme, type } = this.state;

    return (
      <ConfigProvider theme={theme}>
        <div>
          <span className="demo-label">Select Size：</span>
          <Radio.Group
            defaultValue="medium"
            dataSource={sizeList}
            value={this.state.size}
            onChange={this.handleSize}
          />
          <br />
          <br />
          <span className="demo-label">Select Disabled：</span>
          <Radio.Group
            defaultValue={false}
            // @ts-ignore
            dataSource={disabledList}
            value={this.state.disabled}
            onChange={this.handleDisabled}
          />
          <br />
          <br />
          <span className="demo-label">Select Theme：</span>
          <Radio.Group
            defaultValue="white"
            // @ts-ignore
            dataSource={themeList}
            value={this.state.theme}
            onChange={this.handleTheme}
          />
          <br />
          <br />
          <span className="demo-label">Select Type：</span>
          <Radio.Group
            defaultValue="white"
            // @ts-ignore
            dataSource={typeList}
            value={this.state.type}
            onChange={this.handleType}
          />

          <div className={type === 'brand' ? type : theme}>
            <p key="1">default</p>


            <Search
              key="2"
              // theme={theme}
              size={size}
              type={type}
              disabled={disabled}
              onSearch={onSearch}
              style={{ width: '400px' }}
            />
            <p key="3">custom text </p>
            <Search
              key="4"
              // theme={theme}
              size={size}
              type={type}
              disabled={disabled}
              searchText="search"
              onSearch={onSearch}
              style={{ width: '400px' }}
            />
            <p key="5">custom text widthout icon</p>
            <Search
              key="6"
              // theme={theme}
              size={size}
              type={type}
              hasIcon={false}
              disabled={disabled}
              searchText={<span>search</span>}
              onSearch={onSearch}
              style={{ width: '400px' }}
            />
            <p key="7">Suppliers</p>
            <Search
              // theme={theme}
              size={size}
              type={type}
              disabled={disabled}
              onChange={this.onChange}
              onSearch={onSearch}
              filterProps={{ autoWidth: false, color: 'red' }}
              defaultFilterValue="Suppliers"
              filter={dataSource}
              onFilterChange={this.onFilterChange.bind(this)}
              style={{ width: '400px' }}
            />
            <p key="8">Suppliers and relevance</p>
            <Search
              // theme={theme}
              size={size}
              type={type}
              disabled={disabled}
              onChange={this.onChange}
              onSearch={onSearch}
              filterProps={{ autoWidth: true, color: 'red' }}
              defaultFilterValue="Suppliers"
              filter={dataSource}
              dataSource={dataSource}
              onFilterChange={this.onFilterChange.bind(this)}
              style={{ width: '400px' }}
            />


          </div>
        </div>
      </ConfigProvider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('search-demo-1'));