"use client"
import { FormProvider, useForm } from "react-hook-form"
import { useFormState as useReactFormState } from "react-dom"
import { useEffect } from "react"
import { zodResolver } from "@hookform/resolvers/zod"

import { editProfile } from "@/actions/editProfile"
import { editProfileSchema, type EditProfileSchema } from "./schema"
import { useProfileStore } from "@/stores/edit-profile"

import FormContent from "./Content"

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

import {
  type EditFormProps,
  type State,
} from "@/types/components/myPages/myProfile/edit"

export default function Form({ user }: EditFormProps) {
  const isValid = useProfileStore((store) => store.valid)
  const setValid = useProfileStore((store) => store.setValid)
  /**
   * like react, react-hook-form also exports a useFormState hook,
   * we want to clearly keep them separate by naming.
   */
  const [state, formAction] = useReactFormState<State, FormData>(
    editProfile,
    null
  )

  const form = useForm<EditProfileSchema>({
    defaultValues: {
      country: user.country,
      city: user.address.city,
      dob: user.dob,
      email: user.email,
      phone: user.phone,
      street: user.address.street,
      zip: user.address.zipcode,
    },
    criteriaMode: "all",
    mode: "onTouched",
    resolver: zodResolver(editProfileSchema),
    reValidateMode: "onChange",
  })

  useEffect(() => {
    if (isValid !== form.formState.isValid) {
      setValid(form.formState.isValid)
    }
  }, [form.formState.isValid, isValid, setValid])

  return (
    <FormProvider {...form}>
      <form action={formAction} className={styles.form} id="edit-profile">
        <FormContent control={form.control} />
      </form>
    </FormProvider>
  )
}