"use client";
import { useAppDispatch } from "@/lib/redux/hooks";
import { useTranslations } from "next-intl";
import { z } from "zod";
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { FormItem, FormWrapper } from "@/components/ui/form";
import AppInput from "@/components/ui/input";
import AppButton from "@/components/ui/button";
import { doUpdateApp } from "@/lib/redux/features/app";
import AppModal from "@/components/ui/modal";
import { ResponseStatus } from "@/types/common";
import { UpdateAppResponse } from "@/types/app";

type UpdateAppModalProps = {
  isOpenUpdateModal: boolean;
  setOpenUpdateModal: (value: boolean) => void;
  appDetails: any;
  handleGetAppDetails: (appId: string) => void;
};

export default function UpdateAppModal({
  isOpenUpdateModal,
  setOpenUpdateModal,
  appDetails,
  handleGetAppDetails,
}: UpdateAppModalProps) {
  const dispatch = useAppDispatch();
  const t = useTranslations("Form");
  const [isLoading, setIsLoading] = useState(false);

  const closeModal = () => {
    updateAppForm.reset();
    setOpenUpdateModal(false);
  };
  const formSchema = z.object({
    appName: z
      .string()
      .trim()
      .min(1, { message: t("validate.required") })
      .max(255, { message: t("validate.maximum_characters") }),
  });
  type updateAppFormSchema = z.infer<typeof formSchema>;

  const updateAppForm = useForm<updateAppFormSchema>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      appName: "",
    },
    values: {
      appName: appDetails?.name ?? "",
    },
  });

  async function onSubmit(values: updateAppFormSchema) {
    try {
      if (!appDetails?.id) {
        throw new Error("App id not found");
      }
      const request = {
        name: values.appName,
        id: appDetails?.id,
      };
      const result = await dispatch(doUpdateApp(request));
      const payload = result?.payload as UpdateAppResponse;
      if (payload && payload.status === ResponseStatus.SUCCESS) {
        handleGetAppDetails(appDetails?.id);
      }
    } catch (error: any) {
      console.log("error", error?.message);
    } finally {
      setIsLoading(false);
      closeModal();
    }
  }

  return (
    <AppModal
      title={t("update_app")}
      isOpen={isOpenUpdateModal}
      handleCancel={closeModal}
    >
      <FormWrapper<updateAppFormSchema>
        form={updateAppForm}
        onSubmit={onSubmit}
        layout="vertical"
        className="space-y-4"
      >
        <FormItem name="appName" label={t("app_name")}>
          {({ value, ref, ...field }) => (
            <AppInput
              value={value}
              ref={ref}
              {...field}
              placeholder={t("app_name_placeholder")}
            />
          )}
        </FormItem>
        <div className="flex justify-end items-center gap-2">
          <AppButton
            type="default"
            loading={isLoading}
            onClick={closeModal}
            className="w-fit"
          >
            {t("button.cancel")}
          </AppButton>
          <AppButton
            type="primary"
            htmlType="submit"
            loading={isLoading}
            className="w-fit"
          >
            {t("button.save")}
          </AppButton>
        </div>
      </FormWrapper>
    </AppModal>
  );
}