import {
  Dialog,
  DialogBody,
  DialogFooter,
  DialogHeader,
  IconButton,
  Typography,
} from "@material-tailwind/react";
import React, { useCallback } from "react";
import { IoIosCloseCircleOutline } from "react-icons/io";

import {
  GREETING_DIALOG_STATUS,
  GREETING_DIALOG_STATUS_KEY,
} from "../constants/app";
import useCustomRouter from "../hooks/useCustomRouter";
import ButtonCustom from "./Button";

export function GreetingDialog({ handleOpen, open }) {
  const { push } = useCustomRouter();

  const buyNowAction = useCallback(() => {
    push(`/products?category=subscription`);
  }, [push]);

  return (
    <>
      <Dialog size="xs" open={open} handler={handleOpen} className="px-3 py-4">
        <DialogHeader className="justify-center">
          <Typography
            variant="h2"
            className=" text-xl font-semibold text-black-500 mb-0"
          >
            🌟 Exciting News! 🌟
          </Typography>
          <IconButton
            size="sm"
            variant="text"
            className="!absolute right-3 top-3 outline-none"
            onClick={async () => {
              await localStorage.setItem(
                GREETING_DIALOG_STATUS_KEY,
                GREETING_DIALOG_STATUS.seen,
              );
              handleOpen(false);
            }}
          >
            <IoIosCloseCircleOutline className="w-6 h-6 text-gray-500 cursor-pointer" />
          </IconButton>
        </DialogHeader>
        <DialogBody>
          <Typography
            variant="h6"
            className="text-sm leading-6 font-normal text-black-400 text-center"
          >
            🌟 We’re thrilled to announce the launch of the Homni Advantage
            Membership! This exclusive membership is designed for users who want
            to unlock premium benefits and features. 🎉 Be among the first to
            explore this exciting new offering! 👉 Visit the Subscription page
            now to learn more and grab your membership today! Don’t miss out on
            the chance to elevate your experience with Homni Advantage. 🚀
          </Typography>
        </DialogBody>
        <DialogFooter className="justify-center">
          <ButtonCustom
            icon={""}
            className={""}
            onClick={async () => {
              buyNowAction();
              await localStorage.setItem(
                GREETING_DIALOG_STATUS_KEY,
                GREETING_DIALOG_STATUS.seen,
              );
              handleOpen(false);
            }}
          >
            Buy Now
          </ButtonCustom>
          {/* <ButtonCustom
                        icon={''}
                        onClick={async () => {
                            await localStorage.setItem(
                                GREETING_DIALOG_STATUS_KEY,
                                GREETING_DIALOG_STATUS.seen,
                            );
                            handleOpen(false);
                        }}
                        className="mr-1"
                    >
                        <span>close</span>
                    </ButtonCustom> */}
        </DialogFooter>
      </Dialog>
    </>
  );
}
