"use client"

import { useIntl } from "react-intl"

import { getLocalizedLanguageOptions } from "@/constants/languages"

import Divider from "@/components/TempDesignSystem/Divider"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DateSelect from "@/components/TempDesignSystem/Form/Date"
import DeprecatedPhone from "@/components/TempDesignSystem/Form/DeprecatedPhone"
import Input from "@/components/TempDesignSystem/Form/Input"
import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
import Select from "@/components/TempDesignSystem/Form/Select"
import Body from "@/components/TempDesignSystem/Text/Body"
import useLang from "@/hooks/useLang"

import styles from "./formContent.module.css"

export default function FormContent() {
  const intl = useIntl()
  const lang = useLang()

  const languageOptions = getLocalizedLanguageOptions(lang)
  const city = intl.formatMessage({
    defaultMessage: "City",
  })
  const country = intl.formatMessage({
    defaultMessage: "Country",
  })
  const email = `${intl.formatMessage({
    defaultMessage: "Email",
  })} ${intl
    .formatMessage({
      defaultMessage: "Address",
    })
    .toLowerCase()}`
  const street = intl.formatMessage({
    defaultMessage: "Address",
  })
  const phoneNumber = intl.formatMessage({
    defaultMessage: "Phone number",
  })
  const currentPassword = intl.formatMessage({
    defaultMessage: "Current password",
  })
  const retypeNewPassword = intl.formatMessage({
    defaultMessage: "Retype new password",
  })
  const zipCode = intl.formatMessage({
    defaultMessage: "Zip code",
  })

  return (
    <>
      <section className={styles.user}>
        <header>
          <Body textTransform="bold">
            {intl.formatMessage({
              defaultMessage: "User information",
            })}
          </Body>
        </header>
        <DateSelect name="dateOfBirth" registerOptions={{ required: true }} />
        <Input
          data-hj-suppress
          label={`${street} 1`}
          name="address.streetAddress"
        />
        <Input data-hj-suppress label={city} name="address.city" />
        <div className={styles.container}>
          <Input
            data-hj-suppress
            label={zipCode}
            name="address.zipCode"
            registerOptions={{ required: true }}
          />
          <CountrySelect
            label={country}
            name="address.countryCode"
            registerOptions={{ required: true }}
          />
        </div>
        <Input
          label={email}
          name="email"
          registerOptions={{ required: true }}
          type="email"
          data-hj-suppress
        />
        <DeprecatedPhone
          label={phoneNumber}
          name="phoneNumber"
          data-hj-suppress
        />
        <Select
          items={languageOptions}
          label={intl.formatMessage({
            defaultMessage: "Language",
          })}
          name="language"
        />
      </section>
      <Divider className={styles.divider} color="subtle" />
      <section className={styles.password}>
        <header>
          <Body textTransform="bold">
            {intl.formatMessage({
              defaultMessage: "Password",
            })}
          </Body>
        </header>
        <PasswordInput
          data-hj-suppress
          label={currentPassword}
          name="password"
        />
        <PasswordInput data-hj-suppress isNewPassword name="newPassword" />
        <PasswordInput
          data-hj-suppress
          label={retypeNewPassword}
          name="retypeNewPassword"
        />
      </section>
    </>
  )
}
