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

import { _ } from "@/lib/translation"
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 { pending } = useFormStatus()
  const setIsPending = useProfileStore((store) => store.setIsPending)
  const country = useWatch({ name: "address.country" })

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

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

      <Field>
        <Field.Icon>
          <CalendarIcon />
        </Field.Icon>
        <Field.Label htmlFor="dateOfBirth">*{_("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">*{_("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">
          *{_("Address")}
        </Field.Label>
        <Field.Content>
          <Input
            aria-label={_("Street")}
            control={control}
            name="address.streetAddress"
            placeholder={_("Street 123")}
            registerOptions={{ required: true }}
          />
        </Field.Content>
      </Field>

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

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