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

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

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

    this.state = {
      visible9: false,
    };
    this.onClick1 = this.onClick1.bind(this);
    this.onClick2 = this.onClick2.bind(this);
    this.onClick3 = this.onClick3.bind(this);
    this.onClick4 = this.onClick4.bind(this);
    this.onClick5 = this.onClick5.bind(this);
    this.onClick6 = this.onClick6.bind(this);
    this.onClick7 = this.onClick7.bind(this);
    this.onClick8 = this.onClick8.bind(this);
    this.onClick9 = this.onClick9.bind(this);
    this.onClick10 = this.onClick10.bind(this);
    this.onClick11 = this.onClick11.bind(this);
    this.onClick12 = this.onClick12.bind(this);

    this.onClickLeft = this.onClickLeft.bind(this);
    this.onClickRight = this.onClickRight.bind(this);
    this.onClickBottom = this.onClickBottom.bind(this);
    this.onClickTop = this.onClickTop.bind(this);
    this.onClickCenter = this.onClickCenter.bind(this);
  }

  onClick1() {
    Message.info('随便说说话', { duration: 0 });
  }
  onClick2() {
    Message.success('恭喜你，答对了！');
  }
  onClick3() {
    Message.alert('你犯了错了！');
  }
  onClick4() {
    Message.question('哔哔哔~ 疑问？');
  }
  onClick5() {
    let apis = Message.loading('loading, 自定义10s关闭时机');
    setTimeout(() => {
      apis.close();
    }, 10000);
  }


  onClick6() {
    Message.info({
      content: 'info信息，设置可关闭延时8秒',
      duration: 8,
      closable: true,
    });
  }
  onClick7() {
    Message.info({
      content: 'info信息，设置延时4秒',
      duration: 4,
    });
  }

  onClick8() {
    Message.info({
      content: (
        <ul>
          <li>自定义内容</li>
          <li>自定义内容</li>
          <li>自定义内容</li>
        </ul>
      )
    });
  }
  onClick9() {
    Message.info({
      content: (
        <ul>
          <li>自定义内容</li>
          <li>自定义内容</li>
          <li>自定义内容</li>
          <li>自定义内容</li>
        </ul>
      ),
      closable: true,
      onClose: () => {
        Message.success({
          content: '消息回调'
        }, 1000);
      }

    });
  }
  onClick10() {
    Message.destroy();
  }

  onClick11() {
    Message.config({
      direction: 'left'
    });
  }
  onClick12() {
    Message.config({
      duration: 5
    });
  }

  onClickLeft() {
    Message.info({
      content: '左边方向消息',
      direction: 'left'
    });
  }
  onClickRight() {
    Message.info({
      content: '右边方向消息',
      direction: 'right'
    });
  }
  onClickCenter() {
    Message.info({
      content: '中间方向消息',
      direction: 'center'
    });
  }
  onClickTop() {
    Message.info({
      content: '上边方向消息',
      direction: 'top'
    });
  }
  onClickBottom() {
    Message.info({
      content: '底部方向消息',
      direction: 'bottom'
    });
  }


  render() {
    return (
      <Demo name="Message" doc={<Doc />}>
        <DemoPanel title="普通类型提示信息">
          <Button onClick={this.onClick1}>info</Button>
          <Button onClick={this.onClick2}>success</Button>
          <Button onClick={this.onClick3}>alert</Button>
          <Button onClick={this.onClick4}>question</Button>
        </DemoPanel>
        <DemoPanel title="loading类型">
          <Button onClick={this.onClick5}>loading异步自行移除</Button>
        </DemoPanel>

        <DemoPanel title="消息方向设置">
          <Button onClick={this.onClickTop}>消息在上方</Button>
          <Button onClick={this.onClickBottom}>消息在下方</Button>
          <Button onClick={this.onClickCenter}>消息在正中间</Button>
          <Button onClick={this.onClickLeft}>消息在做左边</Button>
          <Button onClick={this.onClickRight}>消息在右边</Button>
        </DemoPanel>
        <DemoPanel title="消息其他设置">
          <Button onClick={this.onClick6}>设置消息有关闭按钮</Button>
          <Button onClick={this.onClick7}>修改消息延时</Button>
          <Button onClick={this.onClick8}>修改消息内容</Button>
          <Button onClick={this.onClick9}>设置消息关闭回调</Button>
        </DemoPanel>
        <DemoPanel title="全局设置">
          <Button onClick={this.onClick10}>全局销毁</Button>
          <Button onClick={this.onClick11}>设置全局消息方向为左边</Button>
          <Button onClick={this.onClick12}>设置全局延时为5s</Button>
        </DemoPanel>
      </Demo>

    );
  }
}

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

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