"use client";
import SubscriptionForm from "@/components/forms/subscription-form";
import AppButton from "@/components/ui/button";
import AppModal from "@/components/ui/modal";
import { doCreateSubscription } from "@/lib/redux/features/subscriptionsPlan";
import { useAppDispatch } from "@/lib/redux/hooks";
import {
  ResponseStatus,
  SortDirection,
  SortField,
  Status,
} from "@/types/common";
import { SubscriptionPlanQueryParams } from "@/types/subscriptionsPlan";
import React, { useState } from "react";
import { useTranslations } from "use-intl";
import AppTypography from "@/components/ui/typography";
import { PlusOutlined } from "@ant-design/icons";
import { AuthInfo } from "@/types/auth";
import { UserType } from "@/types/user";
import { App } from "@/types/app";

type CreateSubscriptionProps = {
  appId: string;
  authInfo: AuthInfo;
  setSubscriptionQuery: (params: SubscriptionPlanQueryParams) => void;
  appDetails?: App;
};

const CreateSubscription = ({
  appId,
  authInfo,
  setSubscriptionQuery,
  appDetails,
}: CreateSubscriptionProps) => {
  const dispatch = useAppDispatch();
  const t = useTranslations("AppPage.subscription");

  const [isOpenCreateSubModal, setIsOpenCreateSubModal] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const handleOpenCreateSubModal = () => {
    setIsOpenCreateSubModal(true);
  };
  const handleCloseCreateSubModal = () => {
    setIsOpenCreateSubModal(false);
  };
  const handleSubmit = async (values) => {
    try {
      if (!appId) {
        console.error("Error creating subscription: App ID not found");
        return;
      }
      setIsLoading(true);
      const result = await dispatch(
        doCreateSubscription({ ...values, appsId: appId }),
      );
      const payload = result?.payload;
      if (payload && payload.status === ResponseStatus.SUCCESS) {
        handleCloseCreateSubModal();
        setSubscriptionQuery({
          pageNumber: 1,
          pageSize: 10,
          sortField: SortField.createdTime,
          sortDirection: SortDirection.DESC,
        });
      }
    } catch (error: any) {
      console.error("Error creating subscription:", error?.message);
    } finally {
      setIsLoading(false);
    }
  };
  return (
    <>
      <div className="flex justify-between items-center">
        <AppTypography type="title" level={3}>
          {t("title")}
        </AppTypography>
        <AppButton
          onClick={handleOpenCreateSubModal}
          icon={<PlusOutlined />}
          disabled={
            authInfo?.userType !== UserType.ADMIN ||
            appDetails?.status === Status.INACTIVE
          }
        >
          {t("create_subscription")}
        </AppButton>
      </div>
      <AppModal
        isOpen={isOpenCreateSubModal}
        destroyOnClose
        handleCancel={handleCloseCreateSubModal}
      >
        <SubscriptionForm
          isLoading={isLoading}
          handleSubmit={handleSubmit}
          handleCloseModal={handleCloseCreateSubModal}
        />
      </AppModal>
    </>
  );
};

export default CreateSubscription;