"use client";

import {
  Dialog,
  DialogBody,
  DialogFooter,
  DialogHeader,
} from "@material-tailwind/react";
import React, { useCallback, useEffect } from "react";

import subscriptionIcon from "../../public/img/subscriptionIcon.png";
import { ROUTES } from "../constants/routes";
import useCustomRouter from "../hooks/useCustomRouter";
import { _useScopedI18n } from "../i18n/client";
import ButtonCustom from "./Button";
import CustomNextImage from "./CustomNextImage";

type SubscriptionPurchaseDialogComponentProps = {
  showSubscriptionDialog: boolean;
  onClose: () => void;
  description?: string;
};

export default function SubscriptionPurchaseDialogComponent({
  showSubscriptionDialog,
  onClose,
  description,
}: SubscriptionPurchaseDialogComponentProps) {
  //
  const scopeT = _useScopedI18n("sharedComponents.buySubscriptionComponent");

  const [open, setOpen] = React.useState(showSubscriptionDialog);
  const { push } = useCustomRouter();

  useEffect(() => {
    setOpen(showSubscriptionDialog);
  }, [showSubscriptionDialog]);

  const handleClose = () => {
    setOpen(false);
    onClose();
  };

  const handleBuySubscription = useCallback(() => {
    // redirect to subscription page
    return push(`${ROUTES.dashboard.products}?category=subscription`);
  }, [push]);

  return (
    <>
      <Dialog
        open={open}
        handler={handleClose}
        size="xs"
        className="md:!max-w-[500px] md:!min-w-[500px] py-4 px-0 md:p-7  flex flex-col items-center justify-center"
      >
        <CustomNextImage
          src={subscriptionIcon.src}
          alt="SessionIcon"
          width={80}
          height={80}
        />
        <div className="text-center">
          <DialogHeader className="text-lg md:text-xl font-semibold text-black-500 pb-2">
            {scopeT("header")}
          </DialogHeader>
          <div className="w-24 h-1 mx-auto rounded-full header-underline"></div>
        </div>

        <DialogBody className="text-sm  md:text-base text-slate-400 font-medium text-center">
          {description ?? scopeT("description")}
        </DialogBody>
        <DialogFooter className="pb-0">
          <ButtonCustom icon={undefined} onClick={handleBuySubscription}>
            {scopeT(`redirectBtn`)}
          </ButtonCustom>
        </DialogFooter>
      </Dialog>
    </>
  );
}
