import React from 'react';

import Validator from '../index';
import Button from '../../button/index';
import { Form, FormRow, Label } from '../../form/index';

import Input from '../../input/index';
import Radio, { RadioGroup } from '../../radio/index';
import Datepicker from '../../datepicker/index';
import Dropdown from '../../dropdown/index';

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

    this.state = {
      isFree: true,
      hasEndTime: 0,
      canSubmit: false
    };

    this.checkers = {
      endFlag: (val, callback) => {
        let isValid = true;
        let msg = '';

        if (!this.state.isFree && val === 0) {
          isValid = false;
          msg = '付费课必须选择课程截止日期';
        }

        callback({ isValid, msg });
      }
    };

    this.handleTypeChange = this.handleTypeChange.bind(this);
    this.handleFlagChange = this.handleFlagChange.bind(this);
  }

  handleTypeChange(val) {
    this.setState({
      isFree: val === 1
    }, () => {
      return val === 1 ?
        this.validator.checkField(undefined, 'courseRight') :
        this.validator.checkField(undefined, 'coursePrice');
    });
  }

  handleFlagChange(val) {
    this.setState({
      hasEndTime: val === 1
    }, () => {
      this.validator.checkField(undefined, 'courseEndTime');
    });
  }

  toggleSubmit(val) {
    this.setState({
      canSubmit: val
    });
  }

  render() {
    return (
      <Validator
        ref={(instance) => { this.validator = instance; }}
        checkers={this.checkers}
        onValid={() => this.toggleSubmit(true)}
        onInValid={() => this.toggleSubmit(false)}
      >
        <Form horizontal={false}>
          <FormRow>
            <Label required>课程名称(使用内置校验模式)</Label>
            <Input
              name="courseName"
              placeholder="1-10个字"
              data-required
              data-patterns={[{
                key: 'limit',
                msg: '须在1-10个字内',
                limit: {
                  min: 1,
                  max: 10
                }
              }]}
            />
          </FormRow>

          <FormRow>
            <Label required>课程类型(表单联动)</Label>
            <RadioGroup
              name="courseType"
              style={{ display: 'inline' }}
              defaultValue={1}
              onChange={this.handleTypeChange}
              data-required
              data-patterns={[]}
            >
              <Radio value={1}>免费</Radio>
              <Radio value={2}>收费</Radio>
            </RadioGroup>
          </FormRow>

          {!this.state.isFree ?
            <FormRow>
              <Label required>课程价格</Label>
              <Input
                name="coursePrice"
                placeholder="内置校验模式"
                data-required
                data-patterns={[{
                  key: 'range',
                  msg: '须在1-8000元之间',
                  range: {
                    min: 1,
                    max: 8000
                  }
                }]}
              />
            </FormRow> :
            <FormRow>
              <Label required>课程版权</Label>
              <Dropdown
                name="courseRight"
                options={[{
                  value: 1,
                  display: '免费提供课程版权给课堂'
                }, {
                  value: 2,
                  display: '不提供课程版权'
                }]}
                style={{ width: 200 }}
                data-required
                data-patterns={[]}
              />
            </FormRow>}

          <FormRow>
            <Label>课程有效期(使用传入的校验模式，表单联动)</Label>
            <Dropdown
              name="courseEndFlag"
              options={[{
                value: 1,
                display: '课程截止时间'
              }, {
                value: 0,
                display: '学习有效期'
              }]}
              style={{ width: 200 }}
              onChange={this.handleFlagChange}
              data-patterns={[{
                key: 'endFlag'
              }]}
            />
            {this.state.hasEndTime ?
              <FormRow>
                <Label required>截止时间</Label>
                <Datepicker
                  name="courseEndTime"
                  data-required
                  data-patterns={[]}
                />
              </FormRow> : null}
          </FormRow>

          <Button disabled={!this.state.canSubmit}>提交</Button>
        </Form>
      </Validator>
    );
  }
}