import { Checkbox } from 'antd';
import React from 'react';
import { useIntl } from '@wisdom-utils/components';
import LoginForm from '../../../components/Login';
import LoginMessage from '../../../js/loginMessage';
import passwordIcon from './images/password.png';
import userIcon from './images/user.png';

/* eslint-disable */
const { UserName, Password, Submit } = LoginForm;
const useAccount = props => (
  <LoginForm onSubmit={props.onSubmit} welcome={props.welcome}>
    {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',
          }),
        },
      ]}
      prefix={<img src={userIcon}/>}
    />
    <Password
      name="password"
      placeholder={useIntl().formatMessage({
        id: 'pages.login.password.placeholder',
      })}
      rules={[
        {
          required: true,
          message: useIntl().formatMessage({
            id: 'pages.login.password.required',
          }),
        },
      ]}
      prefix={<img src={passwordIcon}/>}
    />
    <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;