"use client"
// import { useFormStatus } from "react-dom"
import { useIntl } from "react-intl"

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

import Divider from "@/components/TempDesignSystem/Divider"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DateSelect from "@/components/TempDesignSystem/Form/Date"
import Input from "@/components/TempDesignSystem/Form/Input"
import NewPassword from "@/components/TempDesignSystem/Form/NewPassword"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import Select from "@/components/TempDesignSystem/Form/Select"
import Body from "@/components/TempDesignSystem/Text/Body"

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

export default function FormContent() {
  const intl = useIntl()
  // const { pending } = useFormStatus()

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

  return (
    <>
      <section className={styles.user}>
        <header>
          <Body textTransform="bold">
            {intl.formatMessage({ id: "User information" })}
          </Body>
        </header>
        <DateSelect name="dateOfBirth" registerOptions={{ required: true }} />
        <Input label={`${street} 1`} name="address.streetAddress" />
        <Input label={city} name="address.city" />
        <div className={styles.container}>
          <Input
            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"
        />
        <Phone label={phoneNumber} name="phoneNumber" />
        <Select
          items={languageSelect}
          label={intl.formatMessage({ id: "Language" })}
          name="language"
          placeholder={intl.formatMessage({ id: "Select language" })}
        />
      </section>
      <Divider className={styles.divider} color="subtle" />
      <section className={styles.password}>
        <header>
          <Body textTransform="bold">
            {intl.formatMessage({ id: "Password" })}
          </Body>
        </header>
        <Input label={currentPassword} name="password" type="password" />
        {/* visibilityToggleable set to false as feature is done for signup first */}
        {/* likely we can remove the prop altogether once signup launches */}
        <NewPassword visibilityToggleable={false} />
        <Input
          label={retypeNewPassword}
          name="retypeNewPassword"
          type="password"
        />
      </section>
    </>
  )
}
