import { useMemo } from 'react'

import { client } from 'config/clients'
import { formIds } from 'config/form'
import { AUTH_SERVICE } from 'config/routes'
import { ClientNames } from 'config/clients/types'

import { Combobox } from 'features/Combobox'
import { Input } from 'features/Common'
import { T9n } from 'features/T9n'
import { Error } from 'features/Common/Input/styled'
import { ArrowLoader } from 'features/ArrowLoader'

import type { Props } from './hooks/useUserInfo'
import { useUserInfo } from './hooks/useUserInfo'

import { OutlineButton, SolidButton } from '../../styled'
import {
  Form,
  ButtonWrapper,
  PrivacyPolicyLink,
  PrivacyWrapper,
} from './styled'

const labelWidth = 76

const {
  email,
  firstname,
  formError,
  lastname,
  phone,
} = formIds

export const PersonalInfoForm = (props: Props) => {
  const {
    handleSubmit,
    hasChanges,
    lang,
    langOptions,
    loader,
    onLangSelect,
    onPhoneBlur,
    readFormError,
    readFormValue,
    resetPassword,
    updateFormValue,
  } = useUserInfo(props)

  const isPrivacyPolicyShown = useMemo(() => {
    switch (client.name) {
      case ClientNames.Facr:
        return false
      default:
        return true
    }
  }, [])

  return (
    <Form>
      <Input
        value={readFormValue(firstname)}
        labelLexic='name'
        autoComplete='given-name'
        labelWidth={labelWidth}
        onChange={updateFormValue(firstname)}
        iconName='Edit'
        maxLength={500}
        withError={false}
      />
      <Input
        value={readFormValue(lastname)}
        labelLexic='lastname'
        autoComplete='family-name'
        labelWidth={labelWidth}
        onChange={updateFormValue(lastname)}
        iconName='Edit'
        maxLength={500}
        withError={false}
      />
      <Input
        onBlur={onPhoneBlur}
        value={readFormValue(phone)}
        labelLexic='phone'
        autoComplete='tel'
        labelWidth={labelWidth}
        onChange={updateFormValue(phone)}
        error={readFormError(phone)}
        iconName='Edit'
        maxLength={100}
        withError={false}
      />
      <Input
        value={readFormValue(email)}
        error={readFormError(email)}
        type='email'
        labelLexic='form_email'
        labelWidth={labelWidth}
        onChange={updateFormValue(email)}
        maxLength={500}
        withError={false}
        disabled
      />
      <Combobox
        noSearch
        selected
        labelLexic='language'
        labelWidth={labelWidth}
        value={lang}
        onSelect={onLangSelect}
        options={langOptions}
        maxLength={500}
        withError={false}
      />
      <ButtonWrapper>
        <SolidButton
          disabled={!hasChanges()}
          type='button'
          onClick={handleSubmit}
        >
          {loader ? <ArrowLoader disabled /> : <T9n t='save_changes' />}
        </SolidButton>
        <OutlineButton
          type='button'
          onClick={resetPassword}
        >
          <T9n t='change_password' />
        </OutlineButton>
        <Error t={readFormError(formError) || ''} />
      </ButtonWrapper>
      <PrivacyWrapper>
        <PrivacyPolicyLink
          target='_blank'
          href={`${AUTH_SERVICE}${client.termsLink}`}
        >
          <T9n t='terms_and_conditions' />
        </PrivacyPolicyLink>
        {isPrivacyPolicyShown && (
          <PrivacyPolicyLink
            target='_blank'
            href={`${AUTH_SERVICE}${client.privacyLink}`}
          >
            <T9n t='privacy_policy_and_statement' />
          </PrivacyPolicyLink>
        )}
      </PrivacyWrapper>
    </Form>
  )
}