import { T9n } from 'features/T9n'
import { ArrowLoader } from 'features/ArrowLoader'

import { PAGES } from '../../config/pages'
import { LanguageSelect } from '../LanguageSelect'
import { PasswordInput } from '../PasswordInput'
import { Input } from '../Input'
import { Logo } from '../Logo'
import { useLoginForm } from './hooks'
import {
  InputGroup,
  BlockTitle,
  CenterBlock,
  ButtonsBlock,
  Form,
  ButtonSolid,
  Error,
  LanguageSelectWrapper,
} from '../../styled'
import { RegisterButton } from './styled'

const Login = () => {
  const {
    authError,
    email,
    formError,
    formRef,
    handleSubmit,
    isFetching,
    isSubmitDisabled,
    onEmailBlur,
    onEmailChange,
    onPasswordBlur,
    onPasswordChange,
    password,
    url,
  } = useLoginForm()

  return (
    <CenterBlock>
      <Logo />
      <Form
        method='POST'
        ref={formRef}
        action={url}
        onSubmit={handleSubmit}
      >
        <BlockTitle t='step_title_login' />

        <InputGroup>
          <Input
            autoFocus
            type='email'
            name='email'
            autoComplete='email'
            placeholderLexic='form_email'
            value={email}
            onChange={onEmailChange}
            onBlur={onEmailBlur}
          />
          <PasswordInput
            type='password'
            name='password'
            autoComplete='current-password'
            placeholderLexic='form_password'
            value={password}
            onChange={onPasswordChange}
            onBlur={onPasswordBlur}
          />
        </InputGroup>

        <ButtonsBlock>
          <Error>
            <T9n t={formError} />
            <T9n t={authError} />
          </Error>
          <ButtonSolid type='submit' disabled={isSubmitDisabled}>
            {
              isFetching
                ? <ArrowLoader />
                : <T9n t='login' />
            }
          </ButtonSolid>
          <RegisterButton to={`${PAGES.registration}${window.location.search}`}>
            <T9n t='register' />
          </RegisterButton>
        </ButtonsBlock>
        <LanguageSelectWrapper>
          <LanguageSelect />
        </LanguageSelectWrapper>
      </Form>
    </CenterBlock>
  )
}

export default Login
