import React from 'react'

import { formIds } from 'config/form'

import { T9n } from 'features/T9n'
import { Input, ButtonSolid } from 'features/Common'
import { Error } from 'features/Common/Input/styled'
import {
  BlockTitle,
  ButtonsBlock,
  Form,
} from 'features/Login/styled'
import { FormStore } from 'features/FormStore'

import { useRegistrationForm } from './hooks'

const labelWidth = 76

const Registration = () => {
  const {
    handleSubmit,
    onEmailBlur,
    readFormError,
    readFormValue,
    updateFormValue,
  } = useRegistrationForm()

  return (
    <Form onSubmit={handleSubmit} forRegPage>
      <BlockTitle>
        <T9n t='step_title_registration' />
      </BlockTitle>
      <Input
        value={readFormValue(formIds.email)}
        error={readFormError(formIds.email)}
        type='email'
        labelLexic='form_email'
        labelWidth={labelWidth}
        onChange={updateFormValue(formIds.email)}
        onBlur={onEmailBlur}
      />
      <Input
        value={readFormValue(formIds.password)}
        error={readFormError(formIds.password)}
        type='password'
        labelLexic='form_password'
        labelWidth={labelWidth}
        onChange={updateFormValue(formIds.password)}
      />
      <ButtonsBlock>
        <ButtonSolid type='submit'>
          <T9n t='next' />
        </ButtonSolid>
        <Error t={readFormError(formIds.formError) || ''} />
      </ButtonsBlock>
    </Form>
  )
}

export const RegistrationStep = () => (
  <FormStore>
    <Registration />
  </FormStore>
)