import './demo3.css';
import ConfigProvider from '..';
import React from 'react';
import ReactDOM from 'react-dom';
import enUS from '../../locale/en-us';
import jaJP from '../../locale/ja-jp';
import ptPT from '../../locale/pt-pt';
import viVN from '../../locale/vi-vn';
import zhCN from '../../locale/zh-cn';
import {
  Box,
  Button,
  Calendar2,
  Card,
  Cascader,
  CascaderSelect,
  Collapse,
  DatePicker,
  DatePicker2,
  Dialog,
  Input,
  NumberPicker,
  Pagination,
  Radio,
  Search,
  Select,
  Tab,
  Table,
  Tag,
  TimePicker2,
  Timeline,
  Transfer,
  TreeSelect,
  Upload,
} from '../..';

const localeMap = {
  'zh-cn': zhCN,
  'en-us': enUS,
  'ja-jp': jaJP,
  'vi-vn': viVN,
  'pt-pt': ptPT,
};
// If the application directly imports the next-with-locales.js file from cdn
// it need to import locale file in the following way
// import { locales } from '@alifd/next';
// const enUS = locales['en-us'];
// const zhCN = locales['zh-cn'];

const RangePicker = DatePicker.RangePicker;
const RangePicker2 = DatePicker2.RangePicker;
const Panel = Collapse.Panel;
const TreeNode = TreeSelect.Node;

const transferDataSource = (() => {
  const dataSource = [];

  for (let i = 0; i < 10; i++) {
    dataSource.push({
      label: `content ${i}`,
      value: `${i}`,
      disabled: i % 4 === 0,
    });
  }

  return dataSource;
})();

interface IState {
  lang: string;
  label: string;
  theme: 'white' | 'grey';
  data: Array<any>;
  value1: string;
}

class Demo extends React.Component<{}, IState> {
  constructor(props) {
    super(props);

    this.state = {
      label: '',
      lang: 'en-us',
      theme: 'white',
      data: [],
      value1: 'apple',
    };

    this.changeLang = this.changeLang.bind(this);
    this.showDialog = this.showDialog.bind(this);
    this.changeTheme = this.changeTheme.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.onChange = this.onChange.bind(this);
    this.onSmallChange = this.onSmallChange.bind(this);
  }

  componentDidMount() {
    fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')
      .then(response => response.json())
      .then(data => {
        data[1].disabled = true;
        this.setState({ data });
      })
      .catch(e => console.log(e));
  }

  handleChange(value, data, extra) {
    console.log(value, data, extra);

    this.setState({
      label: extra.selectedPath.map(d => d.label).join(' / '),
    });
  }

  onChange(value, e) {
    console.log(value, e.type, e.triggerType);
  }

  onSmallChange(value) {
    this.setState({
      value1: value,
    });
  }

  changeLang(lang) {
    this.setState({
      lang,
    });
  }

  changeTheme(theme) {
    this.setState({
      theme,
    });
  }

  showDialog() {
    Dialog.confirm({
      title: 'Confirm',
      content:
        'Are you sure you want to delete all alert e-mails waiting in queue?',
    });
  }

  render() {
    const locale = localeMap[this.state.lang];

    const { theme } = this.state;

    return (
      <div className={theme}>
        <div className="change-locale">
          <span style={{ marginRight: 16 }}>Change locale of components: </span>
          <Radio.Group
            shape="button"
            size="large"
            defaultValue="en-us"
            onChange={this.changeLang}
          >
            <Radio value="en-us">English</Radio>
            <Radio value="zh-cn">中文</Radio>
            <Radio value="ja-jp">日本語</Radio>
            <Radio value="vi-vn">ViệtName</Radio>
            <Radio value="pt-pt">Português</Radio>
          </Radio.Group>
        </div>
        <br />
        <div className="change-theme">
          <span style={{ marginRight: 16, marginTop: 16 }}>Change theme of components: </span>
          <Radio.Group
            shape="button"
            size="large"
            defaultValue="white"
            onChange={this.changeTheme}
          >
            <Radio value="white">White</Radio>
            <Radio value="grey">Grey</Radio>
          </Radio.Group>
        </div>
        <ConfigProvider locale={locale} theme={theme}>
          <div className="locale-components">
            <Button type="primary" onClick={this.showDialog}>
              Show Dialog
            </Button>
            <Search />
            <Input />

            <Select style={{ width: '150px' }} dataSource={[ 'hello', 'bye' ]} />

            <Calendar2
              style={{
                width: '500px',
                padding: '12px',
                border: '1px solid #C4C6CF',
                borderRadius: '3px',
              }}
              shape="card"
            />
            <Cascader dataSource={this.state.data} onChange={this.handleChange} />
            <CascaderSelect
              dataSource={this.state.data}
              onChange={this.handleChange}
            />

            <Collapse>
              <Panel title="simple tile">
        Promotions are marketing campaigns ran by Marketplace. Participate to sale
        your products during that promotion and make a profit
              </Panel>
              <Panel title="What are Promotion Products?">
        Promotion Products is a service that helps you to promote products you
        list on Marketplace during a certain time range. You can choose which
        products should be available for the promotion. Not all Products of you
        will be available, because Promotions will only attract certain Product
        areas.
              </Panel>
              <Panel title="Why can i not submit a higher price?">
        The Promotion requires a certain price to make sure that our customers are
        attracted.
              </Panel>
              <Panel title="What is Promo Stock?" disabled>
        Promo Stock is the criteria needed to be followed to be able to join
        Promotion. With setting particular Promo Stock value you commit to have
        this amount of stock available while Promotion is active.
              </Panel>
            </Collapse>


            <DatePicker />
            <RangePicker />
            <DatePicker2 />
            <TimePicker2 />
            <RangePicker2 />

            <NumberPicker defaultValue={0} type="inline" onChange={this.onChange} />

            <Pagination defaultCurrent={2} />

            <Radio.Group
              dataSource={[
                {
                  value: 'apple',
                  label: 'Apple',
                  disabled: false,
                },
                {
                  value: 'pear',
                  label: 'Pear',
                },
                {
                  value: 'orange',
                  label: 'Orange',
                  disabled: true,
                },
              ]}
              shape="button"
              size="small"
              value={this.state.value1}
              onChange={this.onSmallChange}
              type='outline'
            />

            <Tab
              shape="wrapped"
            >
              <Tab.Item title="Tab 1" key="1">
          Tab 1 Content
              </Tab.Item>
              <Tab.Item title="Tab 2" key="2" >
          Tab 2 Content
              </Tab.Item>
              <Tab.Item title="Tab 3" key="3" disabled>
          Tab 3 Content
              </Tab.Item>
            </Tab>

            <Box direction="row" className="tag-list" spacing={20}>
              <Tag type="normal">Normal Tag</Tag>
              <Tag type="primary">Primary Tag</Tag>
            </Box>

            <TreeSelect
              treeDefaultExpandAll
              style={{ width: 200 }}
            >
              <TreeNode key="1"
                // @ts-ignore
                value="1"
                label="Component">
                <TreeNode key="2"
                  // @ts-ignore
                  value="2" label="Form">
                  <TreeNode key="4"
                    // @ts-ignore
                    value="4" label="Input" />
                  <TreeNode key="5"
                    // @ts-ignore
                    value="5" label="Select" disabled />
                </TreeNode>
                <TreeNode key="3"
                  // @ts-ignore
                  value="3" label="Display">
                  <TreeNode key="6"
                    // @ts-ignore
                    value="6" label="Table" />
                </TreeNode>
              </TreeNode>
            </TreeSelect>

            <Transfer
              dataSource={transferDataSource}
              defaultValue={[ '3' ]}
              defaultLeftChecked={[ '1' ]}
              titles={[ 'Source', 'Target' ]}
            />

            <Upload.Dragger
              listType="image"
              action="https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload"
              accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
            />

            <Table style={{ width: '500px' }} dataSource={[]}>
              <Table.Column
                title="Name"
                dataIndex="name"
                filters={[
                  { label: 'Filter 1', value: '1' },
                  { label: 'Filter 2', value: '2' },
                ]}
              />
              <Table.Column title="Age" dataIndex="age" />
            </Table>
            <Card style={{ width: '300px' }} title="Title">
              <div style={{ height: '250px', background: '#F7F8FA' }}></div>
            </Card>
            <Timeline fold={[{ foldArea: [ 1, 2 ], foldShow: true }]}>
              <Timeline.Item
                title="Signed"
                content="Signed, sign Alibaba is a small post office, thanks to the use of STO, look forward to once again at your service"
                time={'2016-06-10 10:30:00'}
                state="process"
              />
              <Timeline.Item
                title="Ship"
                content="Express has arrived in Hangzhou, Zhejiang Binjiang company"
                time={'2016-06-10 09:30:00'}
              />
              <Timeline.Item
                title="Ship"
                content="Zhejiang Hangzhou Riverside company sent a member for you to send pieces"
                time={'2016-06-10 09:03:00'}
              />
              <Timeline.Item
                title="Ship"
                content="Zhejiang Hangzhou Transshipment Center has been issued"
                time={'2016-06-10 06:10:00'}
              />
            </Timeline>

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

ReactDOM.render(<Demo />, document.getElementById('config-provider-demo-3'));