"use client"
import { useEffect } from "react"
import { useFormStatus } from "react-dom"
import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl"

import { useProfileStore } from "@/stores/edit-profile"

import {
  CalendarIcon,
  EmailIcon,
  HouseIcon,
  PhoneIcon,
} from "@/components/Icons"
import Field from "@/components/MyProfile/Field"
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 type { EditFormContentProps } from "@/types/components/myPages/myProfile/edit"

export default function FormContent({ control }: EditFormContentProps) {
  const { formatMessage } = useIntl()
  const { pending } = useFormStatus()
  const setIsPending = useProfileStore((store) => store.setIsPending)
  const country = useWatch({ name: "address.country" })

  useEffect(() => {
    setIsPending(pending)
  }, [pending, setIsPending])

  const city = formatMessage({ id: "City" })
  const email = formatMessage({ id: "Email" })
  const street = formatMessage({ id: "Street" })
  const zipCode = formatMessage({ id: "Zip code" })

  return (
    <>
      <Field>
        <Field.Icon>{country}</Field.Icon>
        <Field.Label htmlFor="address.country">
          *{formatMessage({ id: "Country" })}
        </Field.Label>
        <Field.Content>
          <CountrySelect name="address.country" />
        </Field.Content>
      </Field>

      <Field>
        <Field.Icon>
          <CalendarIcon />
        </Field.Icon>
        <Field.Label htmlFor="dateOfBirth">
          *{formatMessage({ id: "Date of Birth" })}
        </Field.Label>
        <Field.Content>
          <DateSelect
            control={control}
            name="dateOfBirth"
            registerOptions={{ required: true }}
          />
        </Field.Content>
      </Field>

      <Field>
        <Field.Icon>
          <EmailIcon />
        </Field.Icon>
        <Field.Label htmlFor="email">*{email}</Field.Label>
        <Field.Content>
          <Input
            aria-label={email}
            control={control}
            name="email"
            placeholder={email}
            registerOptions={{ required: true }}
            type="email"
          />
        </Field.Content>
      </Field>

      <Field>
        <Field.Icon>
          <PhoneIcon />
        </Field.Icon>
        <Field.Label htmlFor="phoneNumber">
          *{formatMessage({ id: "Phone" })}
        </Field.Label>
        <Field.Content>
          <Phone countrySelectName="address.country" name="phoneNumber" />
        </Field.Content>
      </Field>

      <Field>
        <Field.Icon>
          <HouseIcon />
        </Field.Icon>
        <Field.Label htmlFor="address.streetAddress">
          {formatMessage({ id: "Address" })}
        </Field.Label>
        <Field.Content>
          <Input
            aria-label={street}
            control={control}
            name="address.streetAddress"
            placeholder={street}
          />
        </Field.Content>
      </Field>

      <Field>
        <Field.Icon>
          <HouseIcon />
        </Field.Icon>
        <Field.Label htmlFor="address.city">
          {formatMessage({ id: "City/State" })}
        </Field.Label>
        <Field.Content>
          <Input
            aria-label={city}
            control={control}
            name="address.city"
            placeholder={city}
          />
        </Field.Content>
      </Field>

      <Field>
        <Field.Icon>
          <HouseIcon />
        </Field.Icon>
        <Field.Label htmlFor="address.zipCode">*{zipCode}</Field.Label>
        <Field.Content>
          <Input
            aria-label={zipCode}
            control={control}
            name="address.zipCode"
            placeholder={zipCode}
            registerOptions={{ required: true }}
          />
        </Field.Content>
      </Field>
    </>
  )
}