import {Button, Input} from 'antd';
import css from './index.module.css';
import {FC} from 'react';
import {useFormState} from './hooks';
import cla from 'classnames';
import {Controller} from 'react-hook-form';

const LoginInfo: FC = function() {
  const [{errors, control, isLoading, isDisable}, {onSubmit}] = useFormState();

  return (
    <div className={css.loginInfo}>
      <h1>仓储物流管理平台</h1>

      <form className={css.loginForm} onSubmit={onSubmit} data-testid='login_form'>
        <Controller
          control={control}
          name='name'
          render={function({field: {onChange, value}}) {
            return (
              <Input
                name='accountName'
                onChange={onChange}
                value={value}
                placeholder='请输入账户'
              />
            );
          }}
        />
        <p
          className={cla([
            css.errorTips,
            {[css.loginFieldHidden]: !errors.name?.message},
          ])}
        >
          {errors.name?.message ?? ''}
        </p>

        <Controller
          control={control}
          name='password'
          render={function({field: {onChange, value}}) {
            return (
              <Input
                name='accountPassword'
                onChange={onChange}
                value={value}
                placeholder='请输入密码'
                type='password'
              />
            );
          }}
        />
        <p
          className={cla([
            css.errorTips,
            {[css.loginFieldHidden]: !errors.password?.message},
          ])}
        >
          {errors.password?.message ?? ''}
        </p>

        <Button
          htmlType='submit'
          type='primary'
          block
          className={css.loginBtn}
          size='large'
          loading={isLoading}
          disabled={isDisable}
        >
          {
            isLoading
              ? '正在登录'
              : isDisable
                ? '登录成功'
                : '登录'
          }
        </Button>
      </form>
    </div>
  );
};

export default LoginInfo;