import React from 'react'

import { T9n } from 'features/T9n'
import { Combobox } from 'features/Combobox'
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 { formIds } from './config'
import { useRegistrationForm } from './hooks/useForm'

const labelWidth = 116

const Registration = () => {
  const {
    cities,
    countries,
    handleSubmit,
    onCitySelect,
    onCountrySelect,
    onEmailBlur,
    onPhoneBlur,
    onRegionOrCityChange,
    readFormError,
    readFormValue,
    updateFormValue,
  } = useRegistrationForm()

  return (
    <Form onSubmit={handleSubmit} forRegPage>
      <BlockTitle>
        <T9n t='step_title_registration' />
      </BlockTitle>
      <Input
        value={readFormValue(formIds.firstname)}
        error={readFormError(formIds.firstname)}
        labelLexic='form_firstname'
        labelWidth={labelWidth}
        onChange={updateFormValue(formIds.firstname)}
      />
      <Input
        value={readFormValue(formIds.lastname)}
        error={readFormError(formIds.lastname)}
        labelLexic='form_lastname'
        labelWidth={labelWidth}
        onChange={updateFormValue(formIds.lastname)}
      />
      <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)}
      />
      <Combobox
        withArrow
        value={readFormValue(formIds.country)}
        error={readFormError(formIds.country)}
        labelLexic='form_country'
        labelWidth={labelWidth}
        options={countries}
        onChange={updateFormValue(formIds.country)}
        onSelect={onCountrySelect}
      />
      <Input
        value={readFormValue(formIds.region)}
        error={readFormError(formIds.region)}
        labelLexic='form_region'
        labelWidth={labelWidth}
        onChange={onRegionOrCityChange(formIds.region)}
      />
      <Combobox
        value={readFormValue(formIds.city)}
        error={readFormError(formIds.city)}
        labelLexic='form_city'
        labelWidth={labelWidth}
        onChange={onRegionOrCityChange(formIds.city)}
        options={cities}
        onSelect={onCitySelect}
      />
      <Input
        value={readFormValue(formIds.postalCode)}
        error={readFormError(formIds.postalCode)}
        labelLexic='form_postal_code'
        labelWidth={labelWidth}
        onChange={updateFormValue(formIds.postalCode)}
      />
      <Input
        value={readFormValue(formIds.address1)}
        error={readFormError(formIds.address1)}
        labelLexic='form_address1'
        labelWidth={labelWidth}
        onChange={updateFormValue(formIds.address1)}
      />
      <Input
        value={readFormValue(formIds.address2)}
        error={readFormError(formIds.address2)}
        labelLexic='form_address2'
        labelWidth={labelWidth}
        onChange={updateFormValue(formIds.address2)}
      />
      <Input
        value={readFormValue(formIds.phone)}
        error={readFormError(formIds.phone)}
        type='tel'
        labelLexic='form_phone'
        labelWidth={labelWidth}
        onChange={updateFormValue(formIds.phone)}
        onBlur={onPhoneBlur}
      />

      <ButtonsBlock>
        <ButtonSolid type='submit'>
          <T9n t='next' />
        </ButtonSolid>
        <Error t={readFormError(formIds.formError) || ''} />
      </ButtonsBlock>
    </Form>
  )
}

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