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

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

import {
  CalendarIcon,
  EmailIcon,
  HouseIcon,
  PhoneIcon,
} from "@/components/Icons"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DateSelect from "@/components/TempDesignSystem/Form/Date"
import Field from "@/components/MyProfile/Field"
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)

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

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

      <Field>
        <Field.Icon>
          <CalendarIcon />
        </Field.Icon>
        <Field.Label htmlFor="dob">*{_("Date of Birth")}</Field.Label>
        <Field.Content>
          <DateSelect
            control={control}
            name="dob"
            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="phone">*{_("Phone")}</Field.Label>
        <Field.Content>
          <Phone name="phone" />
        </Field.Content>
      </Field>

      <Field>
        <Field.Icon>
          <HouseIcon />
        </Field.Icon>
        <Field.Label htmlFor="street">*{_("Address")}</Field.Label>
        <Field.Content>
          <Input
            aria-label={_("Street")}
            control={control}
            name="street"
            placeholder={_("Street 123")}
            registerOptions={{ required: true }}
          />
        </Field.Content>
      </Field>

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

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