import React from 'react';
import { Button, Input } from 'antd';
import { connect, DispatchProp } from 'dva';
import { formatMessage } from 'umi-plugin-locale';
import { CheckModelState } from './model';

import styles from './style.less';
import { SendCodeType } from '@/types/common';

const RegisterPage: React.FC<DispatchProp & CheckModelState> = ({
  password,
  inviter,
  pwdConfirm,
  verifyCode,
  submitting,
  dispatch,
  codeTimer,
  sendingCode,
}) => {
  let btnText;
  if (codeTimer < 0) {
    btnText = formatMessage({ id: 'check.getCode1' });
  } else if (codeTimer === 0) {
    btnText = formatMessage({ id: 'check.getCode3' });
  } else {
    btnText = formatMessage({ id: 'check.getCode2' }, { time: codeTimer })
  }

  return (
    <div className={styles.register}>
      <Input.Group
        className="item"
        compact={true}
        size="large"
      >
        <Input
          style={{ width: '40%' }}
          placeholder={formatMessage({ id: 'common.codeHolder' })}
          value={verifyCode}
          onChange={e => dispatch({ type: 'check/onUpdateState', verifyCode: e.target.value })}
        />
        <Button
          style={{ width: '60%' }}
          size="large"
          loading={sendingCode}
          disabled={codeTimer > 0}
          onClick={() => dispatch({ type: 'check/sendCode', payload: SendCodeType.SignUp })}
        >{btnText}</Button>
      </Input.Group>

      <Input
        className="item"
        placeholder={formatMessage({ id: 'check.setPwd' })}
        value={password}
        onChange={e => dispatch({ type: 'check/onUpdatePassword', payload: e.target.value })}
        size="large"
        type="password"
      />

      <Input
        className="item"
        placeholder={formatMessage({ id: 'check.confirmPwd' })}
        value={pwdConfirm}
        onChange={e => dispatch({ type: 'check/onUpdateState', pwdConfirm: e.target.value })}
        size="large"
        type="password"
      />

      <Input
        className="item"
        placeholder={formatMessage({ id: 'check.invite' })}
        value={inviter}
        onChange={e => dispatch({ type: 'check/onUpdateState', inviter: e.target.value })}
        size="large"
      />

      <Button
        className="item gradient submit"
        type="primary"
        loading={submitting}
        onClick={() => dispatch({ type: 'check/submitRegister' })}
        size="large"
      >{formatMessage({ id: 'check.register' })}</Button>
    </div>
  );
}

export default connect(
  ({ check } : any) => ({ ...check })
)(RegisterPage) as any;
