import React from 'react';

import {
  FormComponent,
  Input,
  Checkbox,
  Field,
  RadioGroup,
  Radio,
  Button
} from '@alicloud/console-components';

import {
  ITestingProps
} from '../../types';

interface IFieldValues {
  name: string;
  gender: -1 | 0 | 1 | 2;
}

export default function Testing({
  component
}: ITestingProps<FormComponent>): JSX.Element {
  const Form = component;
  const field = Field.useField<IFieldValues>();
  
  return <Form<IFieldValues> {...{
    field,
    style: {
      width: '60%'
    },
    labelCol: {
      fixedSpan: 8
    },
    wrapperCol: {
      span: 14
    },
    colon: true
  }}>
    <Form.Item {...{
      name: 'baseUser',
      label: 'Username',
      required: true,
      requiredMessage: 'Please input your username!'
    }}>
      <Input />
    </Form.Item>
    <Form.Item {...{
      name: 'basePass',
      label: 'Password',
      required: true,
      requiredMessage: 'Please input your password!'
    }}>
      <Input.Password placeholder="Please Enter Password" />
    </Form.Item>
    <Form.Item {...{
      name: 'email',
      label: 'Email',
      format: 'email',
      requiredMessage: 'Please input your email!'
    }}>
      <Input placeholder="Please Enter Email" />
    </Form.Item>
    <Form.Item {...{
      name: 'phone',
      label: 'Phone Number',
      format: 'tel'
    }}>
      <Input placeholder="Please Enter phone number" />
    </Form.Item>
    <Form.Item {...{
      name: 'homepage',
      label: 'Homepage',
      format: 'url'
    }}>
      <Input {...{
        defaultValue: 'https://',
        placeholder: 'e.g. https://www.taobao.com'
      }} />
    </Form.Item>
    <Form.Item {...{
      name: 'over18',
      label: 'I\'m over 18',
      color: false,
      validator: (_rule, value, callback) => {
        if (!value) {
          callback('You must be over 18 years old')
        }
      },
      validatorTrigger: 'onSubmit'
    }}>
      <RadioGroup<boolean>>
        <Radio value={true}>Yes</Radio>
        <Radio value={false}>No</Radio>
      </RadioGroup>
    </Form.Item>
    <Form.Item {...{
      name: 'agreement',
      label: ' ',
      colon: false
    }}>
      <Checkbox defaultChecked>Agree</Checkbox>
    </Form.Item>
    <Form.Item {...{
      label: ' ',
      colon: false
    }}>
      <Form.Submit {...{
        type: 'primary',
        validate: true,
        style: {
          marginRight: 8
        }
      }}>Submit</Form.Submit>
      <Form.Reset>Reset</Form.Reset>
    </Form.Item>
  </Form>;
}