"use client";
import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
import { Modal } from "antd";
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 AppButton from "@/components/ui/button";
import AppCheckbox from "@/components/ui/checkbox";
import { doUpdateAppSetting } from "@/lib/redux/features/appSetting";
import AppInput from "@/components/ui/input";
import { ResponseStatus, Status } from "@/types/common";
import { getAuthInfo } from "@/lib/redux/features/auth";
import { getAppDetail } from "@/lib/redux/features/app";
import { getAppUserDetail } from "@/lib/redux/features/appUser";
import { UserType } from "@/types/user";
import { AppUserRole } from "@/types/appUser";

export default function UpdateAppSettingModal({
  appSettings,
  isOpenUpdateModal,
  setOpenUpdateModal,
  handleGetAppSetting,
}) {
  const dispatch = useAppDispatch();
  const t = useTranslations("Form");
  const authInfo = useAppSelector(getAuthInfo);
  const appDetails = useAppSelector(getAppDetail);
  const appUserDetail = useAppSelector(getAppUserDetail);
  const [isLoading, setIsLoading] = useState(false);

  const closeModal = () => {
    setOpenUpdateModal(false);
    updateAppSettingForm.reset();
  };

  const formSchema = z.object({
    shopifyDomain: z
      .string()
      .trim()
      .min(1, { message: t("validate.required") })
      .max(255, { message: t("validate.maximum_characters") }),
    shopifyToken: z
      .string()
      .trim()
      .min(1, { message: t("validate.required") }),
    bookendUsername: z
      .string()
      .trim()
      .min(1, { message: t("validate.required") }),
    bookendPassword: z
      .string()
      .trim()
      .min(1, { message: t("validate.required") }),
    bookendAccessToken: z
      .string()
      .trim()
      .min(1, { message: t("validate.required") }),
    deliveryOptions: z.object({
      online: z.boolean().default(false),
      offline: z.boolean().default(false),
    }),
  });

  type UpdateAppSettingFormSchema = z.infer<typeof formSchema>;

  const updateAppSettingForm = useForm<UpdateAppSettingFormSchema>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      shopifyDomain: "",
      shopifyToken: "",
      bookendUsername: "",
      bookendPassword: "",
      bookendAccessToken: "",
      deliveryOptions: {
        online: false,
        offline: false,
      },
    },
    values: {
      shopifyDomain: appSettings?.domain,
      shopifyToken: appSettings?.shopifyToken,
      bookendUsername: appSettings?.beUsername,
      bookendPassword: appSettings?.bePassword,
      bookendAccessToken: appSettings?.beAccessToken,
      deliveryOptions: {
        offline: appSettings?.deliveryOptions?.offline,
        online: appSettings?.deliveryOptions?.online,
      },
    },
  });

  async function onSubmit(values: UpdateAppSettingFormSchema) {
    setIsLoading(true);
    try {
      if (!appSettings?.id) {
        console.error("App setting id not found");
        return;
      }
      const request = {
        id: appSettings.id,
        shopifyToken: values.shopifyToken?.trim(),
        domain: values.shopifyDomain?.trim(),
        beUsername: values.bookendUsername?.trim(),
        bePassword: values.bookendPassword?.trim(),
        beAccessToken: values.bookendAccessToken?.trim(),
        deliveryOptions: {
          online: values.deliveryOptions.online,
          offline: values.deliveryOptions.offline,
        },
      };
      console.log("request", request);
      const result = await dispatch(doUpdateAppSetting(request));
      await new Promise((resolve) => setTimeout(resolve, 500));
      if (result.payload.status === ResponseStatus.SUCCESS) {
        await handleGetAppSetting();
      }
    } catch (error: any) {
      console.error("Error: update app setting", error?.message);
    } finally {
      setIsLoading(false);
      closeModal();
    }
  }

  return (
    <Modal
      title={t("settings")}
      open={isOpenUpdateModal}
      onOk={closeModal}
      onCancel={closeModal}
      footer={null}
    >
      <FormWrapper<UpdateAppSettingFormSchema>
        form={updateAppSettingForm}
        onSubmit={onSubmit}
        layout="vertical"
        className="space-y-4"
      >
        <FormItem name="shopifyDomain" label={t("shopify_domain")}>
          {({ value, ref, ...field }) => (
            <AppInput
              ref={ref}
              value={value}
              {...field}
              placeholder={t("shopify_domain_placeholder")}
              disabled={authInfo?.userType !== UserType.ADMIN}
            />
          )}
        </FormItem>
        <FormItem name="shopifyToken" label={t("shopifyToken")}>
          {({ value, ref, ...field }) => (
            <AppInput
              ref={ref}
              value={value}
              {...field}
              placeholder={t("shopifyToken_placeholder")}
              disabled={authInfo?.userType !== UserType.ADMIN}
            />
          )}
        </FormItem>
        <FormItem name="bookendUsername" label={t("bookend_username")}>
          {({ value, ref, ...field }) => (
              <AppInput
                  ref={ref}
                  value={value}
                  {...field}
                  placeholder={t("bookend_username_placeholder")}
              />
          )}
        </FormItem>
        <FormItem name="bookendPassword" label={t("bookend_password")}>
          {({ value, ref, ...field }) => (
              <AppInput
                  ref={ref}
                  value={value}
                  {...field}
                  placeholder={t("bookend_password_placeholder")}
              />
          )}
        </FormItem>
        <FormItem
            name="bookendAccessToken"
            label={t("bookend_access_token")}
        >
          {({ value, ref, ...field }) => (
              <AppInput
                  ref={ref}
                  value={value}
                  {...field}
                  placeholder={t("bookend_access_token_placeholder")}
              />
          )}
        </FormItem>
        <div className="font-semibold text-lg">{t("delivery_options")}</div>
        <div className="flex !mt-2">
          <FormItem name="deliveryOptions.online" className="!mb-0">
            {({ value, onChange, ref, ...field }) => (
              <AppCheckbox
                {...field}
                checkboxRef={ref}
                checked={value}
                onChange={(checked) => onChange(checked)}
                disabled={
                  authInfo?.userType === UserType.USER &&
                  appUserDetail?.role === AppUserRole.DEVELOPER
                }
              >
                {t("online")}
              </AppCheckbox>
            )}
          </FormItem>
          <FormItem name="deliveryOptions.offline" className="!mb-0">
            {({ value, onChange, ref, ...field }) => (
              <AppCheckbox
                {...field}
                checkboxRef={ref}
                checked={value}
                onChange={(checked) => onChange(checked)}
                disabled={
                  authInfo?.userType === UserType.USER &&
                  appUserDetail?.role === AppUserRole.DEVELOPER
                }
              >
                {t("offline")}
              </AppCheckbox>
            )}
          </FormItem>
        </div>

        <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"
            disabled={appDetails?.status === Status.INACTIVE}
          >
            {t("button.save")}
          </AppButton>
        </div>
      </FormWrapper>
    </Modal>
  );
}