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

import React from 'react';
import ReactDom from 'react-dom';
import Checkbox, { CheckGroup } from '../index';
import Icon from '../../icon/index';
import Button from '../../button/index';
import { Demo, DemoPanel } from '../../../external/demo/index';
import Doc from './doc.md';
import '../style/v2.scss';

const options = [
  {
    label: '默认选中且disabled',
    id: 1,
    disabled: true
  },
  {
    label: '默认没选中',
    id: 2
  },
  {
    label: (<span><Icon type="weixin" />默认选中，带有自定义标签（元素）的label</span>),
    id: 3
  }
];

const value = [1, 3];

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.setCheck2 = this.setCheck2.bind(this);
    this.setUncheck2 = this.setUncheck2.bind(this);
    this.setDisabled2 = this.setDisabled2.bind(this);
    this.setUndisabled2 = this.setUndisabled2.bind(this);
    this.onChange3 = this.onChange3.bind(this);
    this.setAllCheck = this.setAllCheck.bind(this);
    this.setAllUncheck = this.setAllUncheck.bind(this);
    this.onChange6 = this.onChange6.bind(this);

    this.state = {
      demo2: {
        disabled: false,
        checked: false
      },
      log3: '',
      value5: value,
      value6: value
    };
  }

  setCheck2() {
    let demo2 = Object.assign({}, this.state.demo2, {
      checked: true
    });

    this.setState({
      demo2
    });
  }

  setUncheck2() {
    let demo2 = Object.assign({}, this.state.demo2, {
      checked: false
    });

    this.setState({
      demo2
    });
  }

  setDisabled2() {
    this.setState({
      demo2: {
        disabled: true
      }
    });
  }

  setUndisabled2() {
    this.setState({
      demo2: {
        disabled: false
      }
    });
  }

  onChange3(isCheck) {
    this.setState({
      log3: isCheck ? '选中了' : '没选中'
    });
  }

  onChange6(ids) {
    this.setState({
      value6: ids
    });
  }

  setAllCheck() {
    this.setState({
      value5: [1, 2, 3]
    });
  }

  setAllUncheck() {
    this.setState({
      value5: []
    });
  }

  render() {
    return (
      <Demo name="Checkbox" doc={<Doc />}>
        <DemoPanel title="单checkbox展示">
          <Checkbox className="class-name-test">
            checkbox default
          </Checkbox>
          <br />
          <Checkbox
            checked
          >
            checkbox checked
          </Checkbox>
          <br />
          <Checkbox
            disabled
          >
            checkbox disabled
          </Checkbox>
          <br />

          <Checkbox
            disabled
            checked
          >
            checkbox disabled and checked
          </Checkbox>
          <br />
          <Checkbox
            style={{
              marginTop: '20px',
            }}
            checked
          >
            checkbox style reset and checked
          </Checkbox>
        </DemoPanel>
        <DemoPanel title="单checkbox控制">
          <Checkbox
            disabled={this.state.demo2.disabled}
            checked={this.state.demo2.checked}
          >
            点击下面按钮操控checkbox状态
          </Checkbox>
          <br />
          <br />
          <Button
            onClick={this.setCheck2}
            size="s"
          >选中</Button>
          <Button
            onClick={this.setUncheck2}
            size="s"
          >取消选中</Button>
          <Button
            onClick={this.setDisabled2}
            size="s"
          >disabled</Button>
          <Button
            onClick={this.setUndisabled2}
            size="s"
          >取消disabled</Button>
        </DemoPanel>
        <DemoPanel title="单checkbox回调">
          <Checkbox
            onChange={this.onChange3}
          >
            onChange回调
          </Checkbox>
          <br />
          <p>{this.state.log3}</p>
        </DemoPanel>
        <DemoPanel title="checkbox Group展示">
          <h3 style={{ fontSize: '16px' }}>inline展示</h3>
          <CheckGroup
            options={options}
            value={value}
            className="class-name-test"
          />
          <h3 style={{ fontSize: '16px' }}>换行展示</h3>
          <CheckGroup
            options={options}
            value={value}
            inline={false}
          />
        </DemoPanel>
        <DemoPanel title="checkbox Group控制">
          <CheckGroup
            options={options}
            value={this.state.value5}
          />
          <br />
          <Button
            onClick={this.setAllCheck}
            size="s"
          >全选</Button>
          <Button
            onClick={this.setAllUncheck}
            size="s"
          >全不选</Button>
        </DemoPanel>
        <DemoPanel title="checkbox Group回调">
          <CheckGroup
            options={options}
            value={this.state.value6}
            onChange={this.onChange6}
          />
          <p>你选中的id列表：{JSON.stringify(this.state.value6)}</p>
        </DemoPanel>
      </Demo>
    );
  }
}

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

// 会被首页调用，判断下有无节点
if (demo) {
  ReactDom.render(<App />, demo);
}