// @require '../../style/reset.scss'

import React from 'react';
import ReactDom from 'react-dom';
import Tab, { TabPanel } from '../index';
import { Demo, DemoPanel } from '../../../external/demo/index';
import Dialog from '../../dialog/index';
import Doc from './doc.md';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      active: '2',
      prev: -1,
      active2: '2',
      prev2: -1,
      visible: false,
    };

    this.onActive = this.onActive.bind(this);
    this.onActive2 = this.onActive2.bind(this);
    this.onBeforeActive = this.onBeforeActive.bind(this);
  }

  onActive(...param) {
    this.setState({
      active: `${param[0]}`,
      prev: param[1],
    });
  }

  onBeforeActive(next) {
    if (next === 0) {
      this.setState({
        visible: true,
      });
      return false;
    }
  }

  onActive2(...param) {
    this.setState({
      active2: `${param[0]}`,
      prev2: param[1],
    });
  }


  render() {
    return (
      <Demo name="Tab" doc={<Doc />}>
        <DemoPanel title="默认用法">
          <Tab className="wafaha">
            <TabPanel tab="选项1">
              <p>面板1</p>
            </TabPanel>
            <TabPanel tab="选项2">
              <p>面板2</p>
            </TabPanel>
            <TabPanel tab="选项3">
              <p>面板3</p>
            </TabPanel>
          </Tab>
        </DemoPanel>
        <DemoPanel title="切换时不销毁被隐藏的">
          <Tab shouldDestroy={false}>
            <TabPanel tab="选项1">
              <p>面板1</p>
            </TabPanel>
            <TabPanel tab="选项2">
              <p>面板2</p>
            </TabPanel>
            <TabPanel tab="选项3">
              <p>面板3</p>
            </TabPanel>
          </Tab>
        </DemoPanel>
        <DemoPanel title="不指定宽度">
          <Tab tabType="fit">
            <TabPanel tab="选项1">
              <p>面板1</p>
            </TabPanel>
            <TabPanel tab="选项2">
              <p>面板2</p>
            </TabPanel>
            <TabPanel tab="选项3">
              <p>面板3</p>
            </TabPanel>
          </Tab>
        </DemoPanel>
        <DemoPanel title="边框">
          <Tab tabType="border">
            <TabPanel tab="选项1">
              <p>面板1</p>
            </TabPanel>
            <TabPanel tab="选项2">
              <p>面板2</p>
            </TabPanel>
            <TabPanel tab="选项3">
              <p>面板3</p>
            </TabPanel>
          </Tab>
        </DemoPanel>
        <DemoPanel title="无顶边导航">
          <Tab tabType="fit" tabScene="long">
            <TabPanel tab="分类1">
              <p>面板1</p>
            </TabPanel>
            <TabPanel tab="分类2">
              <p>面板2</p>
            </TabPanel>
            <TabPanel tab="分类3">
              <p>面板3</p>
            </TabPanel>
            <TabPanel tab="分类4">
              <p>面板4</p>
            </TabPanel>
            <TabPanel tab="分类5">
              <p>面板5</p>
            </TabPanel>
          </Tab>
        </DemoPanel>
        <DemoPanel title="通栏/置顶导航">
          <Tab tabType="fit" tabScene="banner">
            <TabPanel tab="分类1">
              <p>面板1</p>
            </TabPanel>
            <TabPanel tab="分类2">
              <p>面板2</p>
            </TabPanel>
            <TabPanel tab="分类3">
              <p>面板3</p>
            </TabPanel>
            <TabPanel tab="分类4">
              <p>面板4</p>
            </TabPanel>
            <TabPanel tab="分类5">
              <p>面板5</p>
            </TabPanel>
          </Tab>
        </DemoPanel>
        <DemoPanel title="书签样式">
          <Tab tabType="border" tabScene="bookmark">
            <TabPanel tab="分类1">
              <p>面板1</p>
            </TabPanel>
            <TabPanel tab="分类2">
              <p>面板2</p>
            </TabPanel>
            <TabPanel tab="分类3">
              <p>面板3</p>
            </TabPanel>
            <TabPanel tab="分类4">
              <p>面板4</p>
            </TabPanel>
            <TabPanel tab="分类5">
              <p>面板5</p>
            </TabPanel>
          </Tab>
        </DemoPanel>
        <DemoPanel title="居中场景(小于5项,均分)">
          <Tab tabType="fit" tabScene="center">
            <TabPanel tab="分类1">
              <p>面板1</p>
            </TabPanel>
            <TabPanel tab="分类2">
              <p>面板2</p>
            </TabPanel>
            <TabPanel tab="分类3">
              <p>面板3</p>
            </TabPanel>
            <TabPanel tab="分类4">
              <p>面板4</p>
            </TabPanel>
          </Tab>
        </DemoPanel>
        <DemoPanel title="居中场景(5-7项,均分)">
          <Tab tabType="fit" tabScene="center">
            <TabPanel tab="分类1">
              <p>面板1</p>
            </TabPanel>
            <TabPanel tab="分类2">
              <p>面板2</p>
            </TabPanel>
            <TabPanel tab="分类3">
              <p>面板3</p>
            </TabPanel>
            <TabPanel tab="分类4">
              <p>面板4</p>
            </TabPanel>
            <TabPanel tab="分类5">
              <p>面板5</p>
            </TabPanel>
          </Tab>
        </DemoPanel>
        <DemoPanel title="设置选中">
          <Tab active="2">
            <TabPanel tab="选项1">
              <p>面板1</p>
            </TabPanel>
            <TabPanel tab="选项2">
              <p>面板2</p>
            </TabPanel>
            <TabPanel tab="选项3">
              <p>面板3</p>
            </TabPanel>
          </Tab>
        </DemoPanel>
        <DemoPanel title="选中回调">
          <p>选中第 {this.state.active} 项，上一项是 {this.state.prev}</p>
          <Tab
            active={this.state.active}
            onActive={this.onActive}
          >
            <TabPanel tab="选项1">
              <p>面板1</p>
            </TabPanel>
            <TabPanel tab="选项2">
              <p>面板2</p>
            </TabPanel>
            <TabPanel tab="选项3">
              <p>面板3</p>
            </TabPanel>
          </Tab>
        </DemoPanel>
        <DemoPanel title="选中前回调">
          <p>选中第 {this.state.active2} 项，上一项是 {this.state.prev2}</p>
          <Tab
            active={this.state.active2}
            onBeforeActive={this.onBeforeActive}
            onActive={this.onActive2}
          >
            <TabPanel tab="选项1">
              <p>面板1</p>
            </TabPanel>
            <TabPanel tab="选项2">
              <p>面板2</p>
            </TabPanel>
            <TabPanel tab="选项3">
              <p>面板3</p>
            </TabPanel>
          </Tab>
          <Dialog
            visible={this.state.visible}
            title="提示"
            onClose={() => {
              this.setState({ visible: false });
            }}
          >
            <p>选不中第 0 项</p>
          </Dialog>
        </DemoPanel>
      </Demo>
    );
  }
}


const demo = document.getElementById('demo');

if (demo) {
  ReactDom.render(<App />, demo);
}