"use client";
import { useTranslations } from "next-intl";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { useDispatch } from "react-redux";
import { AppDispatch } from "@/store/store";
import { UseMutate } from "@/hooks/UseMutate";
import ShowAlertMixin from "@/shared/ShowAlertMixin";
import { updateUser } from "@/store/auth.slice";
import { Form } from "@/shared/ui/form";
import UseSession from "@/hooks/UseSession";
import PersonalAccountAddresses from "./PersonalAccountAddresses";
import PersonalAccountForm from "@/components/appforms/PersonalAccountForm";
import { useEffect, useState } from "react";
import AppButton from "@/shared/buttons/AppButton";
import AppDialog from "@/shared/Dialogs/AppDialog";
import { AuthStage } from "@/interfaces/types";
import { useRouter } from "nextjs-toploader/app";

export default function PersonalIndex() {
  const session = UseSession();
  const router = useRouter();
  const t = useTranslations("");
  const [isOpen, setIsOpen] = useState(false);
  const [authStage, setAuthStage] = useState<AuthStage>("");
  const [image, setImage] = useState(session?.image || "");

  const dispatch = useDispatch<AppDispatch>();
  const formSchema = yup.object({
    image: yup
      .mixed()
      .required(t("validations.requiredField", { field: t("LABELS.image") })),
    full_name: yup
      .string()
      .required(
        t("validations.requiredField", { field: t("LABELS.full_name") }),
      )
      .matches(
        /^\s*\S+(?:\s+\S+)+\s*$/,
        t("validations.The value must be two words"),
      )
      .max(
        250,
        t("validations.The full name must be less than 250 characters"),
      ),
    email: yup.string(),
    // .matches(
    //   /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
    //   t("validations.invalid_email_address"),
    // )
    // .required(t("validations.requiredField", { field: t("LABELS.email") })),
    phone_limit: yup.number(),
    phone: yup
      .string()
      .required(t("validations.requiredField", { field: t("LABELS.phone") }))
      .test((value, context) => {
        let phoneLimit = context.parent.phone_limit;

        if (!phoneLimit) return true;
        if (value && value.length !== parseInt(phoneLimit)) {
          return context.createError({
            message: t("validations.phoneLimit", {
              length: `${phoneLimit}`,
            }),
            path: "phone",
          });
        }
        return true;
      }),
    phone_code: yup.string(),
    // country_id: yup.string(),
    // city_id: yup.string(),
    // description: yup.string(),
  });
  const form = useForm({
    resolver: yupResolver(formSchema),
    defaultValues: {
      image: "",
      email: "",
      full_name: "",
      phone: "",
      phone_code: "",
      phone_limit: 9,
      // country_id: "",
      // city_id: "",
      // description: "",
    },
  });
  useEffect(() => {
    form.reset({
      ...form.getValues(),
      image: image || "",
      email: session?.email || "",
      full_name: session?.name || "",
      phone: session?.phone || "",
      phone_code: session?.phone_code || "",
      phone_limit: 9,
      // country_id: session?.default_address?.location?.country?.name || "",
      // city_id: session?.default_address?.location?.city?.name || "",
      // description: session?.default_address?.description || "",
    });
  }, [session, form]);
  const { mutate, isLoading } = UseMutate({
    endpoint: "client/profile",
    onSuccess: async (responseData: any) => {
      ShowAlertMixin({
        icon: "success",
        title: responseData?.message,
      });
      dispatch(updateUser(responseData?.data));
      form.reset();
    },
    method: "PUT",
  });
  async function onSubmit(values: yup.InferType<typeof formSchema>) {
    const finalOut: any = {
      email: values.email,
      name: values.full_name,
      phone: values.phone,
      phone_code: values.phone_code,
      image: image,
    };
    if (finalOut.image?.includes("https")) delete finalOut.image;

    await mutate({ ...finalOut });
  }
  return (
    <>
      <div className="min-h-[calc(100vh-80px)] overflow-hidden lg:py-20 py-28">
        <div className="container max-w-4xl">
          <h1 className="text-3xl md:text-4xl mb-6">{t("NAV.Edit profile")}</h1>
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)}>
              <div className="space-y-6">
                <PersonalAccountForm
                  session={session}
                  setImage={setImage}
                  setIsOpen={setIsOpen}
                  setAuthStage={setAuthStage}
                />
                <PersonalAccountAddresses
                  setIsOpen={setIsOpen}
                  setAuthStage={setAuthStage}
                />
                <div className="flex lg:flex-row flex-col gap-4">
                  <AppButton
                    buttonType="submit"
                    button
                    disabled={isLoading}
                    loader={isLoading}
                    className="!lg:flex-1 !w-full"
                    title={t("BUTTONS.save_changes")}
                  />
                  <button
                    type="button"
                    onClick={() => router.back()}
                    className="flex-1 bg-transparent border border-gray-200 text-text-primary text-base px-8 py-3.5 rounded-lg font-medium shadow-sm transition-all duration-300 flex justify-center items-center gap-2 group"
                  >
                    {t("BUTTONS.cancel")}
                  </button>
                </div>
              </div>
            </form>
          </Form>
        </div>
      </div>
      <AppDialog
        width={authStage === "location" ? "w-[580px]" : ""}
        setIsDialogOpen={setIsOpen}
        isDialogOpen={isOpen}
        authStage={authStage}
        setAuthStage={setAuthStage}
      />
    </>
  );
}