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

import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DateSelect from "@/components/TempDesignSystem/Form/Date"
import Input from "@/components/TempDesignSystem/Form/Input"
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"

const languages = [
  { label: "Danish", value: "Da" },
  { label: "German", value: "De" },
  { label: "English", value: "En" },
  { label: "Finnish", value: "Fi" },
  { label: "Norwegian", value: "No" },
  { label: "Swedish", value: "Sv" },
]

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

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

  return (
    <>
      <section className={styles.user}>
        <header>
          <Body textTransform="bold">
            {formatMessage({ id: "User information" })}
          </Body>
        </header>
        <DateSelect name="dateOfBirth" registerOptions={{ required: true }} />
        <Input
          label={`${street} 1`}
          name="address.streetAddress"
          placeholder={street}
        />
        <Input label={city} name="address.city" placeholder={city} />
        <div className={styles.container}>
          <Input
            label={zipCode}
            name="address.zipCode"
            placeholder={zipCode}
            required
          />
          <CountrySelect
            label={country}
            name="address.countryCode"
            placeholder={country}
            registerOptions={{ required: true }}
          />
        </div>
        <Input label={email} name="email" placeholder={email} required />
        <Phone
          label={formatMessage({ id: "Phone number" })}
          name="phoneNumber"
          placeholder={formatMessage({ id: "Phone number" })}
          registerOptions={{ required: true }}
        />
        <Select
          items={languages}
          label={formatMessage({ id: "Language" })}
          name="language"
          placeholder={formatMessage({ id: "Select language" })}
        />
      </section>
      <section className={styles.password}>
        <header>
          <Body textTransform="bold">{formatMessage({ id: "Password" })}</Body>
        </header>
        <Input
          label={password}
          name="currentPassword"
          placeholder={password}
          type="password"
        />
        <Input
          label={newPassword}
          name="newPassword"
          placeholder={newPassword}
          type="password"
        />
        <Input
          label={retypeNewPassword}
          name="retypeNewPassword"
          placeholder={retypeNewPassword}
          type="password"
        />
      </section>
    </>
  )
}
