import Form from '..';
import Input from '../../input';
import React from 'react';
import ReactDOM from 'react-dom';
const FormItem = Form.Item;

const formItemLayout = {
  labelCol: { fixedSpan: 3 },
  wrapperCol: { span: 20 },
};
interface PageStates {
  code: any;
  second: number;
}
class Demo extends React.Component<{}, PageStates> {
  handleSubmit: (values: any, errors: any) => void;
  sendCode: (value: any, errors: any, field: any) => void;
  constructor(props) {
    super(props);

    this.state = {
      code: '',
      second: 60,
    };

    this.handleSubmit = (values, errors) => {
      if (errors) {
        return;
      }
      console.log('Get form value:', values);
    };

    this.sendCode = (values, errors) => {
      if (errors) {
        return;
      }
      this.setState({
        code: Math.floor(Math.random() * (999999 - 99999 + 1) + 99999),
      });

      setInterval(() => {
        let { second } = this.state;
        this.setState({
          second: --second,
        });
      }, 1000);
    };
  }

  render() {
    const { code } = this.state;

    return (
      <Form
        style={{ width: 400 }}
        {...formItemLayout}
        labelTextAlign="left"
        size="large"
        labelAlign="inset"
      >
        <FormItem label="name" required asterisk={false}>
          <Input name="username" trim defaultValue="frank" />
        </FormItem>
        <FormItem label="phone" format="tel" required asterisk={false}>
          <Input
            name="phone"
            trim
            innerAfter={
              <Form.Submit
                text
                type="primary"
                disabled={!!code}
                validate={[ 'phone' ]}
                onClick={this.sendCode}
                style={{ marginRight: 10 }}
              >
                {code ? `retry after ${this.state.second}s` : 'send code'}
              </Form.Submit>
            }
          />
        </FormItem>
        {this.state.code ? (
          <FormItem label="code" required asterisk={false}>
            <Input name="code" trim defaultValue={this.state.code} />
          </FormItem>
        ) : null}

        <FormItem label=" ">
          <Form.Submit
            style={{ width: '100%' }}
            type="primary"
            validate
            onClick={this.handleSubmit}
          >
            Submit
          </Form.Submit>
        </FormItem>
      </Form>
    );
  }
}
ReactDOM.render(<Demo />, document.getElementById('form-demo-4'));