import { useHistory } from 'react-router'

import { T9n } from 'features/T9n'
import { Checkbox } from 'features/Common/Checkbox'
import { ArrowLoader } from 'features/ArrowLoader'
import { RegisterPopup } from 'features/AuthServiceApp/components/RegisterPopup'
import { client } from 'features/AuthServiceApp/config/clients'

import { LanguageSelect } from '../LanguageSelect'
import { PasswordInput } from '../PasswordInput'
import { Input } from '../Input'
import { Logo } from '../Logo'
import { useRegistrationForm } from './hooks'
import {
  BlockTitle,
  CenterBlock,
  InputGroup,
  ButtonsBlock,
  Form,
  ButtonSolid,
  Error,
  LanguageSelectWrapper,
  Wrapper,
} from '../../styled'
import {
  Label,
  Link,
  ButtonOutline,
  CheckboxWrapper,
} from './styled'
import { CompanyInfo } from '../../../CompanyInfo'

const Registration = () => {
  const history = useHistory()
  const {
    authError,
    cookiesAccepted,
    email,
    formError,
    handleModalClose,
    handleSubmit,
    isFetching,
    isModalOpen,
    isSubmitDisabled,
    onCookiesChange,
    onEmailBlur,
    onEmailChange,
    onPasswordBlur,
    onPasswordChange,
    onTermsChange,
    password,
    termsAccepted,
  } = useRegistrationForm()

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

          <InputGroup>
            <Input
              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>
          <Error>
            {formError
              ? <T9n t={formError} />
              : <T9n t={authError} />}
          </Error>

          <CheckboxWrapper>
            <Checkbox
              checked={termsAccepted}
              onChange={onTermsChange}
              label={(
                <Label>
                  <T9n t='accept_privacy' />
                  <Link href={client.termsLink} target='_blank'>
                    <T9n t='terms_and_conditions' />
                  </Link>&nbsp;
                  <T9n t='and' />
                  <Link href={client.privacyLink} target='_blank'>
                    <T9n t='privacy_policy_and_statement' />
                  </Link>
                </Label>
              )}
            />
            <Checkbox
              checked={cookiesAccepted}
              onChange={onCookiesChange}
              label={(
                <Label>
                  <T9n t='accept_cookies' />
                </Label>
              )}
            />
          </CheckboxWrapper>

          <ButtonsBlock>
            <ButtonSolid disabled={isSubmitDisabled} type='submit'>
              {
                isFetching
                  ? <ArrowLoader />
                  : <T9n t='sign_up' />
              }
            </ButtonSolid>
            <ButtonOutline
              type='button'
              onClick={history.goBack}
            >
              <T9n t='go_back' />
            </ButtonOutline>
          </ButtonsBlock>
          <LanguageSelectWrapper>
            <LanguageSelect />
          </LanguageSelectWrapper>
          <RegisterPopup
            email={email}
            isModalOpen={isModalOpen}
            handleModalClose={handleModalClose}
          />
        </Form>
      </CenterBlock>
      <CompanyInfo textAlign='center' width='450px' />
    </Wrapper>
  )
}

export default Registration