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

const LoginPage: React.FC<DispatchProp & CheckModelState> = ({
  password,
  submitting,
  dispatch,
}) => {
  return (
    <>
      <Input
        className="item"
        placeholder={formatMessage({ id: 'common.pwdHolder' })}
        value={password}
        onChange={e => dispatch({ type: 'check/onUpdatePassword', payload: e.target.value })}
        size="large"
        type="password"
      />

      <div
        className="item"
        style={{ textAlign: 'right' }}
        onClick={() => dispatch({ type: 'check/onUpdateState', pageStep: PageStep.Reset })}
      >
        {formatMessage({ id: 'check.forget' })}
      </div>

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

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