/**
 * demo
 * @author shirlyzhang
 * @date 2016-08-29
 */

// @require './demo.scss'

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

function getTarget(index) {
  return () => document.getElementsByClassName(`button-target${index}`)[0];
}

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

    this.state = {
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      visible5: false,
      visible6: true,
      switch: '',
    };

    this.onClose = this.onClose.bind(this);

    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.onClose1 = this.onClose1.bind(this);
    this.onClose2 = this.onClose2.bind(this);
    this.onClose3 = this.onClose3.bind(this);
    this.onClose4 = this.onClose4.bind(this);
    this.onClose5 = this.onClose5.bind(this);

    this.onVisibleChange = this.onVisibleChange.bind(this);
    this.onBeforeVisibleChange = this.onBeforeVisibleChange.bind(this);
  }

  onClose() {
    this.setState({
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      visible5: false,
      switch: '',
    });
  }

  onClick1() {
    this.setState({
      visible1: true,
    });
  }

  onClose1() {
    this.setState({
      visible1: false,
    });
  }

  onClick2() {
    this.setState({
      visible2: true,
    });
  }

  onClose2() {
    this.setState({
      visible2: false,
    });
  }

  onClick3() {
    this.setState({
      visible3: true,
    });
  }

  onClose3() {
    this.setState({
      visible3: false,
    });
  }

  onClick4() {
    this.setState({
      visible4: true,
    });
  }

  onClose4() {
    this.setState({
      visible4: false,
    });
  }

  onClick5() {
    this.setState({
      visible5: true,
    });
  }

  onClose5() {
    this.setState({
      visible5: false,
    });
  }

  onVisibleChange(visible) {
    this.setState({
      switch: visible ? '显示' : '隐藏',
    });
  }

  onBeforeVisibleChange(visible) {
    this.setState({
      switch: visible ? '显示前' : '隐藏前',
    });

    // return false;
  }

  render() {
    return (
      <Demo name="Popconfirm" doc={<Doc />}>
        <DemoPanel title="默认气泡框">
          <Button
            onClick={this.onClick1}
            className="pop-demo-button button-target1"
          >默认</Button>
          <Popconfirm
            visible={this.state.visible1}
            content="美丽的泡沫，只是一霎烟火"
            getTarget={getTarget(1)}
          />
        </DemoPanel>
        <DemoPanel title="12种方向气泡框">
          <Button
            onClick={this.onClick2}
            className="pop-demo-button button-target2"
          >rightTop</Button>
          <Popconfirm
            visible={this.state.visible2}
            content="美丽的泡沫，只是一霎烟火"
            placement="rightTop"
            getTarget={getTarget(2)}
          />
        </DemoPanel>
        <DemoPanel title="带title和button的气泡框">
          <Button
            onClick={this.onClick3}
            className="pop-demo-button button-target3"
          >bottomRight</Button>
          <Popconfirm
            visible={this.state.visible3}
            title="气泡框标题"
            button={[
              <Button onClick={this.onClose3} size="s" key="confirm">确认</Button>,
              <Button onClick={this.onClose3} size="s" key="cancel">取消</Button>,
            ]}
            content="气泡框内容"
            placement="bottomRight"
            getTarget={getTarget(3)}
          />
        </DemoPanel>
        <DemoPanel title="气泡框状态切换时事件触发">
          <p>
            <Icon
              className="pop-demo-icon"
              type="info"
            />
            事件触发提示：{this.state.switch}
          </p>
          <Button
            onClick={this.onClick4}
            className="pop-demo-button button-target4"
          >bottomRight</Button>
          <Popconfirm
            visible={this.state.visible4}
            title="气泡框标题"
            button={[
              <Button onClick={this.onClose4} size="s" key="confirm">确认</Button>,
              <Button onClick={this.onClose4} size="s" key="cancel">取消</Button>,
            ]}
            content="气泡框内容"
            placement="bottomRight"
            getTarget={getTarget(4)}
            onVisibleChange={this.onVisibleChange}
            onBeforeVisibleChange={this.onBeforeVisibleChange}
          />
        </DemoPanel>
        <DemoPanel title="自定义位置气泡框">
          <Button
            onClick={this.onClick5}
            className="pop-demo-button button-target5"
          >自定义位置</Button>
          <Popconfirm
            visible={this.state.visible5}
            content="美丽的泡沫，只是一霎烟火"
            align={{
              points: ['cc', 'cc'],
              offset: [30, 45],
            }}
            getTarget={getTarget(5)}
          />
        </DemoPanel>
        <DemoPanel title="内联气泡框">
          <Popconfirm
            visible={this.state.visible6}
            content="美丽的泡沫，只是一霎烟火"
            inline
          />
        </DemoPanel>
      </Demo>
    );
  }
}

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

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