"use client";
import getProfile from "@/app/api-requests/getProfile";
import {
  currentUserInfoInPaymentStore,
  userInfoStore,
} from "@/app/store/userInfoStore";
import Input from "@/components/ui/Input";
import { Form } from "@/components/ui/form";
import { useToast } from "@/components/ui/use-toast";
import useCurrentLanguage from "@/hooks/useCurrentLanguage";
import { userInfoSchema } from "@/lib/validations/shemas/userInfoSchema";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";

const UserInfoPaymentForm = () => {
  const { toast } = useToast();
  const { locale } = useCurrentLanguage();
  const { isLoading, userData } = getProfile();
  const { username, email, title, phone, updateUserInfo, is_verify } =
    userInfoStore();
  const { updateUserInfoInPayment } = currentUserInfoInPaymentStore();

  const form = useForm<z.infer<typeof userInfoSchema>>({
    resolver: zodResolver(userInfoSchema),
    // defaultValues: userInfoDefaultValues,
    defaultValues: { username, email, title, phone },
  });

  // way 2
  // useEffect(() => {
  //   const data = {
  //     email,
  //     title,
  //     phone,
  //     username,
  //   }

  //   updateUserInfoInPayment(data)
  // }, [])

  // way 1
  useEffect(() => {
    if (userData) {
      form.setValue("email", userData?.email);
      form.setValue("title", userData?.title);
      form.setValue("phone", userData?.phone);
      form.setValue("username", userData?.username || userData?.title);

      const data = {
        email: userData?.email,
        title: userData?.title,
        phone: userData?.phone,
        username: userData?.username,
        is_verify: userData?.is_verify,
      };
      updateUserInfo(data);
      updateUserInfoInPayment(data);
    }
  }, [userData]);

  useEffect(() => {
    const handleChange = () => {
      const data = {
        email: form.getValues("email"),
        title: form.getValues("title"),
        phone: form.getValues("phone"),
        username: form.getValues("username"),
      };

      updateUserInfoInPayment(data);
    };
    form.watch(handleChange);
  }, [form]);

  function onSubmit(values: z.infer<typeof userInfoSchema>) {
    console.log("on submit", values);
  }

  return (
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
        className="space-y-4 capitalize"
      >
        {/* name */}
        <Input
          form={form}
          placeholder="user_name"
          name="username"
          label="user_name"
          required
        />

        {/* title */}
        <Input
          form={form}
          placeholder="titleName"
          name="title"
          label="titleName"
          required
        />

        {/* email */}
        <Input
          form={form}
          placeholder="email"
          name="email"
          label="email"
          required
        />

        {/* phone number */}
        <Input
          form={form}
          placeholder="phone"
          name="phone"
          label="phone"
          type="tel"
          required
        />
        {/* TODO: m => ref this btn and use it in invoice (payment) to check if form is valid after calling updateProfile api */}
        {/* <button type="submit">Submit</button> */}
      </form>
    </Form>
  );
};

export default UserInfoPaymentForm;