import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Form from '../../lib/form';
import Input from '../../lib/input';
import Textarea from '../../lib/textarea';
import Choice from '../../lib/choice';
import DatePicker from '../../lib/date-picker';
import Picker from '../../lib/picker';
import Verification from '../../lib/verification';

class Deom extends React.Component<any, any> {
  constructor(props, state) {
    super(props, state);
  }

  public onsubmit(values) {
    console.log(values);
  }
  public render() {
    return (
      <Form
        fields={[
          'inputRequired',
          'inputTel',
          'inputPatternMsg',
          'inputSpace',
          'inputNumber',
          'inputChar',
          'inputName',
          'inputLandline',
          'inputPrice',
          'inputInteger',
          'inputCardId',
          'textarea',
          'choiceRadio',
          'choiceCheckbox',
          'datePicker',
          'picker',
          'pickerDefault'
        ]}
        onSubmit={(values) => this.onsubmit(values)}
      >
        <div>
          <div>普通输入框：</div>
          <Input
            id="inputText"
            defaultValue=""
          />
        </div>
        <div>
          <div>必填输入框：</div>
          <Input
            id="inputRequired"
            defaultValue=""
            //required="此字段必填"
          />
        </div>
        <div>
          <div>disabled输入框：</div>
          <Input
            id="inputDisabled"
            defaultValue="disabled"
            disabled
          />
        </div>
        <div>
          <div>readOnly输入框：</div>
          <Input
            id="inputreadOnly"
            defaultValue="readOnly"
            readOnly
          />
        </div>
        <div>
          <div>空格验证：</div>
          <Input
            id="inputSpace"
            patternType="space"
            defaultValue=""
          />
        </div>
        <div>
          <div>数字验证：</div>
          <Input
            id="inputNumber"
            patternType="number"
            defaultValue=""
          />
        </div>
        <div>
          <div>正常字符验证：</div>
          <Input
            id="inputChar"
            patternType="char"
            defaultValue=""
          />
        </div>
        <div>
          <div>姓名验证：</div>
          <Input
            id="inputName"
            patternType="name"
            defaultValue=""
          />
        </div>
        <div>
          <div>手机验证：</div>
          <Input
            id="inputTel"
            type="tel"
            patternType="tel"
            maxLength={11}
            required="手机号必填"
            defaultValue=""
          />
          <Verification
            inputId="inputTel"
            callback={() => alert('发送成功')}
          />
        </div>
        <div>
          <div>座机验证：</div>
          <Input
            id="inputLandline"
            type="tel"
            patternType="landline"
            defaultValue=""
            //maxLength={11}
          />
        </div>
        <div>
          <div>金额验证：</div>
          <Input
            id="inputPrice"
            type="tel"
            patternType="price"
            defaultValue=""
            //maxLength={11}
          />
        </div>
        <div>
          <div>整数验证：</div>
          <Input
            id="inputInteger"
            type="tel"
            patternType="integer"
            defaultValue=""
            //maxLength={11}
          />
        </div>
        <div>
          <div>身份证验证：</div>
          <Input
            id="inputCardId"
            patternType="cardId"
            maxLength={18}
            defaultValue=""
          />
        </div>
        <div>
          <div>改变验证提示：</div>
          <Input
            id="inputPatternMsg"
            type="tel"
            patternType="tel"
            maxLength={11}
            patternMsg="改变了验证提示"
            defaultValue=""
          />
        </div>
        <div>
          <div>文本域：</div>
          <Textarea
            id="textarea"
            defaultValue=""
          />
        </div>
        <div>
          <div>自增长文本域：</div>
          <Textarea
            id="textarea"
            defaultValue=""
            auto
          />
        </div>
        <div>
          <div>单选：</div>
          <Choice
            id="choiceRadio"
            value={[{
              id: 1,
              checked: false,
              label: <label htmlFor="choiceRadio_1"><input type="radio" id="choiceRadio_1" name="choiceRadio" />id_1</label>
            }, {
              id: 2,
              checked: false,
              label: <label htmlFor="choiceRadio_2"><input type="radio" id="choiceRadio_2" name="choiceRadio" />id_2</label>
            }, {
              id: 3,
              checked: false,
              label: <label htmlFor="choiceRadio_3"><input type="radio" id="choiceRadio_3" name="choiceRadio" />id_3</label>
            }]}
            onClick={null}
          />
        </div>
        <div>
          <div>多选：</div>
          <Choice
            id="choiceCheckbox"
            type="checkbox"
            value={[{
              id: 1,
              checked: false,
              label: <label htmlFor="choiceCheckbox_1"><input type="checkbox" id="choiceCheckbox_1" name="choiceCheckbox" />id_1</label>
            }, {
              id: 2,
              checked: false,
              label: <label htmlFor="choiceCheckbox_2"><input type="checkbox" id="choiceCheckbox_2" name="choiceCheckbox" />id_2</label>
            }, {
              id: 3,
              checked: false,
              label: <label htmlFor="choiceCheckbox_3"><input type="checkbox" id="choiceCheckbox_3" name="choiceCheckbox" />id_3</label>
            }]}
            onClick={null}
          />
        </div>
        <div>
          <div>日期选择：</div>
          <DatePicker
            id="datePicker"
            defaultValue={undefined}
          />
        </div>
        <div>
          <div>选择器：</div>
          <Picker
            id="picker"
            defaultValue={undefined}
            data={[
              [{
                value: 1,
                label: '1',
              }, {
                value: 2,
                label: '2',
              }, {
                value: 3,
                label: '3',
              }]
            ]}
          />
        </div>
        <div>
          <div>带默认值的选择器：</div>
          <Picker
            id="pickerDefault"
            defaultValue={[{
              value: 3
            }]}
            data={[
              [{
                value: 1,
                label: '1',
              }, {
                value: 2,
                label: '2',
              }, {
                value: 3,
                label: '3',
              }]
            ]}
          />
        </div>
        <p>
          <button id="submit" type="submit">提交</button>
        </p>
      </Form>
    );
  }
}

ReactDOM.render(<Deom />, document.getElementById('root'));