import React, { PureComponent } from 'react';
import ReactDom from 'react-dom';
import Dropdown from '../index';
import Icon from '../../icon/index';
import Button from '../../button';
import { Demo, DemoPanel } from '../../../external/demo/index';
import Doc from './doc.md';

export default class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      asnycOptions: null,
      dValue: 0,
      templateValue: 'Guangzhou',

      hasNextPage: true,
      isNextPageLoading: false,
      items: []
    };

    this.page = 0;
  }

  _loadNextPage = () => {
    this.setState({ isNextPageLoading: true }, () => {
      this.page++;
      const display = `${this.searchKeyword ? this.searchKeyword : 'display'}${this.page}`;

      setTimeout(((searchKeyword, page) => () => {
        this.setState(state => ({
          hasNextPage: state.items.length < 100,
          isNextPageLoading: false,
          items: (searchKeyword && page <= 1 ? [] : [...state.items]).concat(
            new Array(10).fill(true).map((_,index) => ({
              value: state.items.length + index + 1,
              display: `${display} - ${state.items.length + index + 1}`,
              search: `${display} - ${state.items.length + index + 1}`
            }))
          )
        }));
      })(this.searchKeyword, this.page), 1200);
    });
  };

  _onSearch = (searchKeyword) => {
    this.searchKeyword = searchKeyword;

    this.page = 0;

    this.setState({
      items: [],
      // 保证多次触发搜索，后一次搜索结果覆盖前一次
      isNextPageLoading: true,
    }, this._loadNextPage);
  }


  render() {
    let options = [
      {
        value: 'swift'
      }, {
        value: 'java'
      }, {
        value: 'javascript'
      }
    ];
    let bigOptions = [];
    for (let i = 0; i < 100; i++) {
      bigOptions.push({
        value: i,
        display: `display${i}`,
        search: `display${i}`,
      });
    }
    let { asnycOptions, templateValue, hasNextPage, isNextPageLoading, items } = this.state;
    let groupOptions = [{
      label: '热门城市',
      options: [{
        value: 'Beijing',
        display: '北京',
        search: '北京',
      }, {
        value: 'Shanghai',
        display: '上海',
        search: '上海',
      }, {
        value: 'Guangzhou',
        display: '广州',
        search: '广州',
      }],
    }, {
      label: '城市名',
      options: [{
        value: 'Chengdu',
        display: '成都',
        search: '成都',
      }, {
        value: 'Shenzhen',
        display: '深圳',
        search: '深圳',
      }, {
        value: 'Guangzhou',
        display: '广州',
        search: '广州',
      }, {
        value: 'Hangzhou',
        display: '杭州',
        search: '杭州',
      }],
    }];
    return (
      <Demo doc={<Doc />} name="下拉">
        <DemoPanel title="基本">
          <Dropdown
            options={[
              { value: 'A' },
              { value: 'B' },
              { value: 'C' },
            ]} value={'B'} onChange={window.console.log}
            style={{ width: '200px' }}
          />
        </DemoPanel>
        <DemoPanel title="hover">
          <Dropdown
            options={options}
            style={{ width: '200px' }}
            hoverable
          />
        </DemoPanel>
        <DemoPanel title="placeholder">
          <Dropdown
            options={options}
            style={{ width: '250px' }}
            placeholder="没值被选中时会placeholder"
          />
        </DemoPanel>
        <DemoPanel title="cleanable">
          <Dropdown
            options={options}
            style={{ width: '200px' }}
            placeholder="没值被选中时有placeholder"
            cleanable
          />
        </DemoPanel>
        <DemoPanel title="异步加载选项">
          <Dropdown
            options={asnycOptions}
            style={{ width: '200px' }}
          />
          <p></p>
          <Button onClick={() => {
            this.setState({
              asnycOptions: [
                {
                  value: 'swift'
                }, {
                  value: 'java'
                }, {
                  value: 'javascript'
                }
              ]
            });
          }}>加载选项</Button>
        </DemoPanel>
        <DemoPanel title="选项中嵌套其它元素">
          <Dropdown
            options={[
              {
                display: <Icon
                  type="add"
                />,
                value: '红'
              }, {
                display: <Icon
                  type="alert"
                />,
                value: '蓝色'
              }, {
                display: <Icon
                  type="arrow-bottom"
                />,
                value: '绿色'
              }
            ]}
            style={{ width: '150px' }}
          />
        </DemoPanel>
        <DemoPanel title="搜索选项">
          <Dropdown
            options={bigOptions}
            searchable
          />
        </DemoPanel>
        <DemoPanel title="默认选中选项">
          <Dropdown
            options={options}
            value={options[0].value}
            searchable
          />
        </DemoPanel>
        <DemoPanel title="隐藏边框">
          <Dropdown
            options={options}
            value={options[1].value}
            style={{ width: '150px' }}
            noBorder
            hoverable
          />
        </DemoPanel>
        <DemoPanel title="在下拉列表的被选中的项的右侧显示选中icon">
          <Dropdown
            options={options}
            value={options[1].value}
            showSelectedIcon
            style={{ width: '150px' }}
          />
        </DemoPanel>
        <DemoPanel title="隐藏右边的下拉icon">
          <Dropdown
            options={options}
            value={options[1].value}
            showSelectedIcon
            style={{ width: '150px' }}
            noIcon
            noBorder
          />
        </DemoPanel>
        <DemoPanel title="设置下拉菜单的width">
          <Dropdown
            options={options}
            value={options[1].value}
            showSelectedIcon
            noIcon
            noBorder
            dropdownWidth={500}
          />
        </DemoPanel>
        <DemoPanel title="disabled">
          <Dropdown
            options={options}
            value={options[1].value}
            dropdownWidth={500}
            style={{ width: '100px' }}
            disabled
          />
        </DemoPanel>
        <DemoPanel title="onBlur">
          <Dropdown
            options={options}
            value={options[1].value}
            style={{ width: '100px' }}
            onBlur={window.console.log}
          />
        </DemoPanel>
        <DemoPanel title="onFocus">
          <Dropdown
            options={options}
            value={options[1].value}
            style={{ width: '100px' }}
            onFocus={() => window.console.log('onFocus')}
          />
        </DemoPanel>
        <DemoPanel title="动态设置value">
          <Dropdown
            options={[
              { value: 0 },
              { value: 1 },
              { value: 2 },
              { value: 3 },
              { value: 4 },
              { value: 5 },
              { value: 6 },
              { value: 7 },
              { value: 8 },
              { value: 9 },
            ]}
            searchable
            value={this.state.dValue}
            style={{ width: '100px' }}
          />
          <Button
            size="s"
            onClick={() => {
              this.setState({
                dValue: Math.floor(Math.random() * 10)
              });
            }}
          >random</Button>
          <Button
            size="s"
            onClick={() => {
              this.setState({
                dValue: null,
              });
            }}
          >clean</Button>
        </DemoPanel>
        <DemoPanel title="选项分组">
          <Dropdown
            options={groupOptions}
            value={'Guangzhou'}
            searchable
          />
        </DemoPanel>
        <DemoPanel title="自定义模板">
          <Dropdown
            options={options}
            value={options[0].value}
            style={{ width: '200px' }}
          >{
            options.map(option => {
              return (
                <Dropdown.Option key={option.value} option={option}>
                  <span style={{ float: 'left' }}>{option.value}</span>
                  <span style={{ float: 'right' }}>{option.value.toUpperCase()}</span>
                </Dropdown.Option>
              );
            })
          }
          </Dropdown>
          <Dropdown
            options={groupOptions}
            value={templateValue}
            searchable
          >{
            groupOptions.map(group => {
              return (
                <Dropdown.OptionGroup key={group.label} label={group.label}>{
                  group.options.map(option => {
                    return (
                      <Dropdown.Option key={option.value} option={option}>
                        <span style={{ float: 'left' }}>{option.display}</span>
                        <span style={{ float: 'right' }}>{option.value}</span>
                      </Dropdown.Option>
                    );
                  })
                }</Dropdown.OptionGroup>
              );
            })
          }
          </Dropdown> 
        </DemoPanel>
        <DemoPanel title="远程搜索">
          <Dropdown
            onSearch={this._onSearch}
            options={items}
            searchable
          >
          </Dropdown>
        </DemoPanel>
        <DemoPanel title="分页+远程搜索">
          <Dropdown
            onSearch={this._onSearch}
            options={items}
            searchable
          >
            <Dropdown.DropdownInfiniteOptions
              hasNextPage={hasNextPage}
              isNextPageLoading={isNextPageLoading}
              items={items}
              loadNextPage={this._loadNextPage}
            />
          </Dropdown>
        </DemoPanel>
      </Demo>
    );
  }
}

const demo = document.getElementById('demo');
if (demo) {
  ReactDom.render(<App />, demo);
}