/**
 * demo
 * @author jero
 * @date 2016-07-28
 */

import React from 'react';
import ReactDom from 'react-dom';
import Dialog from '../index';
import Button from '../../button/index';
import { Demo, DemoPanel } from '../../../external/demo/index';
import Doc from './doc.md';
import { Form, FormRow, Label } from '../../form/index';
import Statusbox from '../../statusbox/index';
import '../style/v2.scss';

const { Input, Radio, RadioGroup } = Form;

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

    this.state = {};
  }

  toggle = (ref) => {
    if (!ref || !this.refs[ref]) {
      return;
    }

    let newState = {};
    newState[ref] = !this.state[ref];
    this.setState(newState);
  }

  render() {
    return (
      <Demo name="Dialog" doc={<Doc />}>
        <DemoPanel title="默认弹窗">
          <Button onClick={() => this.toggle('hasTitle')}>有标题</Button>
          <Button onClick={() => this.toggle('noTitle')}>没有标题</Button>
          <Button onClick={() => this.toggle('succ')}>正向消息框</Button>
          <Button onClick={() => this.toggle('medium')}>中等框</Button>
          <Button onClick={() => this.toggle('large')}>大大的对话框</Button>
          <Dialog
            ref="hasTitle"
            visible={this.state.hasTitle}
            onClose={() => this.toggle('hasTitle')}
            title="简单示例"
            button={[<Button onClick={() => this.toggle('hasTitle')} key="confirm">确定</Button>]}
          >
            <p>哈哈哈哈, 我有一个标题</p>
          </Dialog>
          <Dialog
            ref="noTitle"
            visible={this.state.noTitle}
            onClose={() => this.toggle('noTitle')}
            button={[<Button onClick={() => this.toggle('noTitle')} key="confirm">确定</Button>]}
          >
            <p>哈哈哈哈, 我没有标题</p>
          </Dialog>
          <Dialog
            ref="succ"
            visible={this.state.succ}
            onClose={() => this.toggle('succ')}
            type="success"
            msg="哈哈哈哈, 正向信息的消息框"
            subMsg="更多的提醒"
            button={[<Button onClick={() => this.toggle('succ')} key="confirm">确定</Button>]}
          />
          <Dialog
            ref="medium"
            visible={this.state.medium}
            onClose={() => this.toggle('medium')}
            title="报名提示"
            size="medium"
            button={[<Button onClick={() => this.toggle('medium')} key="confirm">确定</Button>]}
          >
            <Statusbox size="l" type="success">您已成功报名！</Statusbox>
            <Form>
              <FormRow>
                <Label required>手机号</Label>
                <Input
                  name="field1"
                  placeholder="请填写您的手机号"
                  data-required
                  data-patterns={[{
                    key: 'mobile',
                    msg: '格式不正确'
                  }]}
                />
              </FormRow>
              <FormRow>
                <Label>邮箱</Label>
                <Input
                  name="field2"
                  placeholder="请填写您的邮箱"
                  data-patterns={[{
                    key: 'email',
                    msg: '格式不正确'
                  }]}
                />
              </FormRow>
              <FormRow>
                <Label required>性别</Label>
                <RadioGroup
                  name="field4"
                  data-required
                  data-patterns={[]}
                >
                  <Radio value="0">男</Radio>
                  <Radio value="1">女</Radio>
                </RadioGroup>
              </FormRow>
            </Form>
          </Dialog>
          <Dialog
            ref="large"
            visible={this.state.large}
            onClose={() => this.toggle('large')}
            title="内容编辑框"
            size="large"
            button={[<Button onClick={() => this.toggle('large')} key="confirm">提交资料</Button>]}
          >
            <Form>
              <FormRow>
                <Label required>手机号</Label>
                <Input
                  name="field1"
                  placeholder="请填写您的手机号"
                />
              </FormRow>
              <FormRow>
                <Label>邮箱</Label>
                <Input
                  name="field2"
                  placeholder="请填写您的邮箱"
                />
              </FormRow>
              <FormRow>
                <Label required>性别</Label>
                <RadioGroup
                  name="field4"
                >
                  <Radio value="0">男</Radio>
                  <Radio value="1">女</Radio>
                </RadioGroup>
              </FormRow>
            </Form>
          </Dialog>
        </DemoPanel>
        <DemoPanel title="自定义按钮">
          <Button
            onClick={() => this.toggle('customBtns')}
          >显示</Button>
          <Dialog
            ref="customBtns"
            visible={this.state.customBtns}
            onClose={() => this.toggle('customBtns')}
            zIndex={6003}
            button={[
              <Button onClick={() => this.toggle('customBtns')} key="confirm">确认</Button>,
              <Button onClick={() => this.toggle('customBtns')} color="weak" key="cancel">取消</Button>,
            ]}
          >
            <p>按钮示例</p>
          </Dialog>
        </DemoPanel>
        <DemoPanel title="超长内容">
          <Button
            onClick={() => this.toggle('longlong')}
          >显示</Button>
          <Dialog
            ref="longlong"
            visible={this.state.longlong}
            onClose={() => this.toggle('longlong')}
            size="large"
            button={[
              <Button onClick={() => this.toggle('longlong')} size="m" key="confirm">确认</Button>,
              <Button onClick={() => this.toggle('longlong')} size="m" color="weak" key="cancel">取消</Button>,
            ]}
          >
            <p>超长内容的滚动条</p>
            <p>一般内容不应该超长, 整框高度最大600px, 如有超出, 再根据设计稿另行定制</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>这也太长了吧</p>
          </Dialog>
        </DemoPanel>
        <DemoPanel title="API使用">
          <Button onClick={() => Dialog.show({ msg: '没有Icon的msg' })}>Show</Button>
          <Button onClick={() => Dialog.info('Info')}>Info</Button>
          <Button onClick={() => Dialog.success('Success')}>Success</Button>
          <Button onClick={() => Dialog.alert('Alert')}>Alert</Button>
          <Button onClick={() => Dialog.confirm({
            msg: 'Confirm',
            onOk: () => {
              console.log('选择确定');
            },
            onCancel: () => {
              console.log('选择取消');
            }
          })}>Confirm</Button>
        </DemoPanel>
      </Demo>
    );
  }
}

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

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