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

const LoginInfo: FC = function () {
  const [{memoUserName, memoAll}, onChange] = useUserMemo();

  const [{errors, control, isLoading, isDisable}, {onSubmit}] = useFormState({
    user: memoUserName,
    all: memoAll,
  });

  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>

        <Controller
          control={control}
          name='type'
          render={function ({field: {onChange, value}}) {
            return (
              <Select
                value={value}
                onChange={onChange}
                options={[{label: '仓储物流系统', value: '1'}]}
              />
            );
          }}
        />

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

        <Space className={css.memo}>
          <Checkbox
            data-testid='memo_user_name'
            onChange={e => onChange('userName')(e.target.checked)}
            checked={memoUserName}
          >
            记住用户名
          </Checkbox>
          <Checkbox
            data-testid='memo_all'
            onChange={e => onChange('all')(e.target.checked)}
            checked={memoAll}
          >
            记住登录信息
          </Checkbox>
        </Space>
      </form>
    </div>
  );
};

export default LoginInfo;
