"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 AppCheckbox from "@/components/ui/checkbox";
import { doCreateApps } from "@/lib/redux/features/app";
import { PlusOutlined } from "@ant-design/icons";
import AppModal from "@/components/ui/modal";
import { AuthInfo } from "@/types/auth";
import { UserType } from "@/types/user";
import {AppQueryParams} from "@/types/app";

type CreateAppModalProps = {
  authInfo: AuthInfo;
  setAppQuery: React.Dispatch<React.SetStateAction<AppQueryParams>>;
};

export default function CreateAppModal({
  authInfo,
  setAppQuery,
}: CreateAppModalProps) {
  const dispatch = useAppDispatch();
  const t = useTranslations("Form");
  const [isOpen, setIsOpen] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const openModal = () => setIsOpen(true);
  const closeModal = () => {
    setIsOpen(false);
    createAppForm.reset();
  };
  const formSchema = z.object({
    appName: z
      .string()
      .trim()
      .min(1, { message: t("validate.required") })
      .max(255, { message: t("validate.maximum_characters") }),
    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 CreateAppFormSchema = z.infer<typeof formSchema>;

  const createAppForm = useForm<CreateAppFormSchema>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      appName: "",
      shopifyDomain: "",
      shopifyToken: "",
      bookendUsername: "",
      bookendPassword: "",
      bookendAccessToken: "",
      deliveryOptions: {
        online: false,
        offline: false,
      },
    },
  });

  async function onSubmit(values: CreateAppFormSchema) {
    setIsLoading(true);
    const request = {
      name: values.appName.trim(),
      shopifyToken: values.shopifyToken,
      domain: values.shopifyDomain.trim(),
      beUsername: values.bookendUsername,
      bePassword: values.bookendPassword,
      beAccessToken: values.bookendAccessToken,
      deliveryOptions: {
        online: values.deliveryOptions.online,
        offline: values.deliveryOptions.offline,
      },
    };
    const result = await dispatch(doCreateApps(request));
    if (result.payload.status === "success") {
      setAppQuery((prev) => ({ ...prev, page: 1 }));
    }

    setIsLoading(false);
    closeModal();
  }

  return (
    <>
      <div className="flex justify-between items-center mb-4">
        <h1 className="text-2xl font-semibold">{t("title")}</h1>
        <div className="flex items-center gap-2">
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
            }}
          >
            <AppButton
              type="primary"
              htmlType="submit"
              loading={isLoading}
              onClick={openModal}
              icon={<PlusOutlined />}
              disabled={authInfo?.userType !== UserType.ADMIN}
            >
              {t("create_app")}
            </AppButton>
          </div>
        </div>
      </div>

      {isOpen && (
        <AppModal
          title={t("create_app")}
          isOpen={isOpen}
          handleOk={closeModal}
          handleCancel={closeModal}
          maskClosable={false}
        >
          <FormWrapper<CreateAppFormSchema>
            form={createAppForm}
            onSubmit={onSubmit}
            layout="vertical"
            className="space-y-4"
          >
            <FormItem name="appName" label={t("app_name")}>
              {({ value, ref, ...field }) => (
                <AppInput
                  ref={ref}
                  value={value}
                  {...field}
                  placeholder={t("app_name_placeholder")}
                />
              )}
            </FormItem>
            <FormItem name="shopifyDomain" label={t("shopify_domain")}>
              {({ value, ref, ...field }) => (
                <AppInput
                  ref={ref}
                  value={value}
                  {...field}
                  placeholder={t("shopify_domain_placeholder")}
                />
              )}
            </FormItem>
            <FormItem name="shopifyToken" label={t("shopifyToken")}>
              {({ value, ref, ...field }) => (
                <AppInput
                  ref={ref}
                  value={value}
                  {...field}
                  placeholder={t("shopifyToken_placeholder")}
                />
              )}
            </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)}
                  >
                    {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)}
                  >
                    {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"
              >
                {t("button.save")}
              </AppButton>
            </div>
          </FormWrapper>
        </AppModal>
      )}
    </>
  );
}