import { Checkbox } from 'antd';
import React, { useRef } from 'react';
import { useIntl } from '@wisdom-utils/components';
import LoginForm from './LoginForm';
import LoginMessage from '../../../js/loginMessage';
/* eslint-disable */
const { UserName, Password, Submit } = LoginForm;
const useAccount = props => {
  const formRef = useRef(null);
  return (
    <LoginForm onSubmit={props.onSubmit} welcome={props.welcome} ref={formRef} form={props.form}>
      {props.status === 'error' && props.type === 'account' && !props.submitting && (
        <LoginMessage
          content={useIntl().formatMessage({
            id: 'pages.login.accountLogin.errorMessage',
          })}
        />
      )}
      <UserName
        name="userName"
        placeholder={useIntl().formatMessage({
          id: 'pages.login.username.placeholder',
        })}
        rules={[
          {
            required: true,
            message: useIntl().formatMessage({
              id: 'pages.login.username.required',
            }),
          },
        ]}
      />
      <Password
        name="password"
        placeholder={useIntl().formatMessage({
          id: 'pages.login.password.placeholder',
        })}
        rules={[
          {
            required: true,
            message: useIntl().formatMessage({
              id: 'pages.login.password.required',
            }),
          },
        ]}
      />
      <div>
        <Checkbox checked={props.autoLogin} onChange={e => props.setAutoLogin(e.target.checked)}>
          {useIntl().formatMessage({ id: 'pages.login.rememberMe' })}
        </Checkbox>
      </div>
      <Submit loading={props.submitting}>{useIntl().formatMessage({ id: 'pages.login.submit' })}</Submit>
    </LoginForm>
  );
};

export default useAccount;