import { client } from 'config/clients'
import { formIds } from 'config/form'

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 { langOptions } from './config'
import { 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,
    loader,
    onLangSelect,
    onPhoneBlur,
    readFormError,
    readFormValue,
    updateFormValue,
  } = useUserInfo(props)

  return (
    <Form>
      <Input
        value={readFormValue(firstname)}
        labelLexic='name'
        autoComplete='given-name'
        labelWidth={labelWidth}
        onChange={updateFormValue(firstname)}
        editIcon
        maxLength={500}
        withError={false}
      />
      <Input
        value={readFormValue(lastname)}
        labelLexic='lastname'
        autoComplete='family-name'
        labelWidth={labelWidth}
        onChange={updateFormValue(lastname)}
        editIcon
        maxLength={500}
        withError={false}
      />
      <Input
        onBlur={onPhoneBlur}
        value={readFormValue(phone)}
        labelLexic='phone'
        autoComplete='tel'
        labelWidth={labelWidth}
        onChange={updateFormValue(phone)}
        error={readFormError(phone)}
        editIcon
        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>
        {loader ? <ArrowLoader disabled width='204px' /> : (
          <SolidButton
            disabled={!hasChanges()}
            type='button'
            onClick={handleSubmit}
          >
            <T9n t='save_changes' />
          </SolidButton>
        )}
        <Error t={readFormError(formError) || ''} />
      </ButtonWrapper>
      <PrivacyWrapper>
        <PrivacyPolicyLink
          target='_blank'
          href={client.termsLink}
        >
          <T9n t='terms_and_conditions' />
        </PrivacyPolicyLink>
        <PrivacyPolicyLink
          target='_blank'
          href={client.privacyLink}
        >
          <T9n t='privacy_policy_and_statement' />
        </PrivacyPolicyLink>
      </PrivacyWrapper>
    </Form>
  )
}