import React from 'react'

import { PAGES } from 'config'
import { formIds } from 'config/form'

import { T9n } from 'features/T9n'
import { Logo } from 'features/Logo'
import { Input, ButtonSolid } from 'features/Common'
import { Error } from 'features/Common/Input/styled'
import { FormStore } from 'features/FormStore'

import { useLoginForm } from './hooks'
import {
  BlockTitle,
  CenterBlock,
  ButtonsBlock,
  Form,
  RegisterButton,
} from './styled'

const labelWidth = 75

const LoginForm = () => {
  const {
    handleSubmit,
    onEmailBlur,
    readFormError,
    readFormValue,
    updateFormValue,
  } = useLoginForm()

  const requestError = readFormError(formIds.formError)

  return (
    <CenterBlock>
      <Logo />
      <Form onSubmit={handleSubmit}>
        <BlockTitle>
          <T9n t='step_title_login' />
        </BlockTitle>

        <Input
          type='email'
          value={readFormValue(formIds.email)}
          error={readFormError(formIds.email)}
          onChange={updateFormValue(formIds.email)}
          onBlur={onEmailBlur}
          labelLexic='form_email'
          labelWidth={labelWidth}
        />
        <Input
          type='password'
          value={readFormValue(formIds.password)}
          error={readFormError(formIds.password)}
          onChange={updateFormValue(formIds.password)}
          labelLexic='form_password'
          labelWidth={labelWidth}
        />

        <ButtonsBlock>
          <Error t={requestError || ''} marginBottom={8} />
          <ButtonSolid type='submit'>
            <T9n t='login' />
          </ButtonSolid>
          <RegisterButton to={PAGES.register}>
            <T9n t='register' />
          </RegisterButton>
        </ButtonsBlock>
      </Form>
    </CenterBlock>
  )
}

export const Login = () => (
  <FormStore>
    <LoginForm />
  </FormStore>
)