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

function mockOptions(count, name) {
  if (!name) {
    name = Math.random();
  }
  let re = [];
  for (let i = 0; i < count; i++) {
    re.push({ id: `${i}-${name}`, selected: false });
  }
  return re;
}

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.onAsnycSearch = this.onAsnycSearch.bind(this);
    this.onAsnycLoadmore = this.onAsnycLoadmore.bind(this);
    this.state = {
      visibleBasic: false,
      visibleAsync: false,
      dataAsync: null,
      visibleNest: false,
      visibleSelected: false,
      visibleMaxSelected: false,
      visibleAsyncSearch: false,
      loadingAsyncSearch: false,
      dataAsyncSearch: null,
      visibleAsyncLoadmore: false,
      loadingAsyncLoadmore: false,
      dataAsyncLoadmore: null,
      warning: '',
      visibleWarning: false,
    };
  }

  render() {
    const {
      visibleBasic, visibleAsync, dataAsync, visibleNest,
      visibleSelected, visibleMaxSelected,
      loadingAsyncSearch, visibleAsyncSearch, dataAsyncSearch,
      loadingAsyncLoadmore, visibleAsyncLoadmore, dataAsyncLoadmore,
    } = this.state;
    return (
      <Demo doc={<Doc />} name="选择器">
        <DemoPanel title="基本">
          <Button onClick={() => this.setState({ visibleBasic: true })}>选择课程包</Button>
          <Picker
            visible={visibleBasic}
            name="课程包"
            maxSelected={5}
            detail="支持选择最多关联5门课程（包）"
            data={mockOptions(40)}
            onClose={() => this.setState({ visibleBasic: false })}
            onSave={(data) => {
              window.console.log('selected:', data);
            }}
            onChange={(data) => {
              window.console.log(data);
            }}
          />
        </DemoPanel>
        <DemoPanel title="异步">
          <Button onClick={() => this.setState({ visibleAsync: true })}>异步</Button>
          <Picker
            visible={visibleAsync}
            name="异步课程包"
            data={dataAsync}
            onClose={() => this.setState({ visibleAsync: false })}
            onSave={() => this.setState({ visibleAsync: false })}
          />
        </DemoPanel>
        <DemoPanel title="嵌套">
          <Button onClick={() => this.setState({ visibleNest: true })}>嵌套</Button>
          <Picker
            visible={visibleNest}
            name="嵌套课程包"
            data={[
              {
                id: 1,
                display: <strong style={{ color: 'red' }}>红</strong>,
                search: '红',
              }, {
                id: 2,
                display: <strong style={{ color: 'blue' }}>蓝</strong>,
                search: '蓝色',
              }, {
                id: 3,
                display: <strong style={{ color: 'green' }}>绿</strong>,
                search: '绿色',
              },
            ]}
            onClose={() => this.setState({ visibleNest: false })}
            onSave={() => this.setState({ visibleNest: false })}
          />
        </DemoPanel>
        <DemoPanel title="设置选中">
          <Button onClick={() => this.setState({ visibleSelected: true })}>设置选中</Button>
          <Picker
            visible={visibleSelected}
            name="设置选中课程包"
            data={[
              {
                id: 1,
                display: <h3>红</h3>,
                name: '红',
              }, {
                id: 2,
                display: <h3>blue-蓝色</h3>,
                name: '蓝色',
              }, {
                id: 3,
                display: <h3>green-绿色</h3>,
                name: '绿色',
              },
            ]}
            selectedIdList={[1]}
            preselectedIdList={[2]}
            maxSelected={1}
            onClose={() => this.setState({ visibleSelected: false })}
            onSave={() => this.setState({ visibleSelected: false })}
          />
        </DemoPanel>
        <DemoPanel title="最多选中数">
          <Button onClick={() => this.setState({ visibleMaxSelected: true })}>最多选中数</Button>
          <Picker
            visible={visibleMaxSelected}
            name="最多选中数课程包"
            maxSelected={1}
            data={mockOptions(3)}
            onClose={() => this.setState({ visibleMaxSelected: false })}
            onSave={() => this.setState({ visibleMaxSelected: false })}
            onChange={window.console.log}
          />
        </DemoPanel>
        <DemoPanel title="异步搜索">
          <Button onClick={() => this.setState({ visibleAsyncSearch: true })}>异步搜索</Button>
          <Picker
            visible={visibleAsyncSearch}
            name="异步搜索"
            maxSelected={3}
            data={dataAsyncSearch}
            onClose={() => this.setState({ visibleAsyncSearch: false })}
            onSave={() => this.setState({ visibleAsyncSearch: false })}
            onSearch={this.onAsnycSearch}
            loading={loadingAsyncSearch}
          />
        </DemoPanel>
        <DemoPanel title="异步加载更多">
          <Button onClick={() => this.setState({ visibleAsyncLoadmore: true })}>异步加载更多</Button>
          <Picker
            visible={visibleAsyncLoadmore}
            name="异步加载更多"
            maxSelected={3}
            data={dataAsyncLoadmore}
            onClose={() => this.setState({ visibleAsyncLoadmore: false })}
            onSave={() => this.setState({ visibleAsyncLoadmore: false })}
            onNeedMoreData={this.onAsnycLoadmore}
            loading={loadingAsyncLoadmore}
          />
        </DemoPanel>
        <DemoPanel title="动态设置警告信息">
          <Button onClick={() => this.setState({ visibleWarning: true })}>动态设置警告信息</Button>
          <Button onClick={() => this.setState({ warning: `${this.state.warning}警告信息` })}>设置警告信息</Button>
          <Picker
            visible={this.state.visibleWarning}
            name="动态设置警告信息"
            maxSelected={3}
            data={mockOptions(40)}
            warning={this.state.warning}
            onClose={() => this.setState({ visibleWarning: false })}
            onSave={() => this.setState({ visibleWarning: false })}
          />
        </DemoPanel>
      </Demo>
    );
  }

  componentDidMount() {
    this.timer = window.setTimeout(() => {
      this.setState({
        dataAsync: mockOptions(40),
        dataAsyncSearch: mockOptions(40),
        dataAsyncLoadmore: mockOptions(40),
      });
    }, 5000);
  }

  componentWillUnmount() {
    window.clearTimeout(this.timer);
  }

  onAsnycSearch(searchKeyword, data) {
    this.setState({
      loadingAsyncSearch: true,
    });
    this.timer = window.setTimeout(() => {
      this.setState({
        dataAsyncSearch: data.concat(mockOptions(10, searchKeyword)),
        loadingAsyncSearch: false,
      });
    }, 1000);
  }

  onAsnycLoadmore(searchKeyword, data) {
    this.setState({
      loadingAsyncLoadmore: true,
    });
    this.timer = window.setTimeout(() => {
      if (data != null) {
        this.setState({
          dataAsyncLoadmore: data.concat(mockOptions(10, searchKeyword)),
          loadingAsyncLoadmore: false,
        });
      }
    }, 1000);
  }
}

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