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

import balloon from "../../public/gif/balloon.gif";
import gift from "../../public/gif/gift.gif";
import special from "../../public/img/special.png";
import { _useScopedI18n } from "../i18n/client";
import { useUpgradeCartStore } from "../stores/upgradeCartStore";
import ButtonCustom from "./Button";
import CustomNextImage from "./CustomNextImage";
import ProductPriceComponent from "./ProductPriceComponent";

export type SpecialOfferDialogProps = {
  open: boolean;
  onClose: () => void;
};

export function SpecialOfferDialog({ open, onClose }: SpecialOfferDialogProps) {
  // const { upgradeCart, setUpgradeCart } = useUpgradeCartStore();
  // const {  addShippingCartProductAPI } =
  //     useShippingOrders();

  const { upgradeCart, loading } = useUpgradeCartStore();

  const scopeT = _useScopedI18n("cart");
  return (
    <>
      <Dialog
        open={open}
        handler={onClose}
        dismiss={{ outsidePress: false }}
        size="sm"
        className="
                max-w-[95%]
                md:max-w-[90%] md:min-w-[90%] md:w-[90%] 
                lg:max-w-[60%] lg:min-w-[60%] lg:w-[60%]
                xl:max-w-[40%] xl:min-w-[40%] xl:w-[40%]
                specialOfferBG
                relative
                "
      >
        <CustomNextImage
          src={balloon.src}
          alt="Special offer balloon"
          width={125}
          height={125}
          className="absolute top-[-60px] right-0  md:right-[-60px]"
        />
        <CustomNextImage
          src={balloon.src}
          alt="Special offer balloon"
          width={125}
          height={125}
          className="absolute top-[-60px] left-0  md:left-[-60px]"
        />
        <DialogHeader className="w-full rounded-tl-lg rounded-tr-lg p-8 pb-14">
          <div className="flex flex-col items-center md:w-1/2 mx-auto">
            <CustomNextImage
              src={special.src}
              alt="power icon"
              width={270}
              height={98}
            />
            <Typography
              variant="h6"
              className="text-base md:text-xl font-semibold text-black-500 text-center"
            >
              {scopeT("discountApplied")}
            </Typography>
          </div>
        </DialogHeader>

        <ul>
          <DialogBody className="p-3 mt-5 md:px-4 md:py-0 max-h-[50vh] overflow-y-auto overflow-x-hidden">
            {loading ? (
              <div className="flex justify-center items-center">
                <div
                  className="inline-block h-4 w-4 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
                  role="status"
                >
                  <span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">
                    {scopeT("loading")}
                  </span>
                </div>
              </div>
            ) : (
              <>
                {upgradeCart?.cartProducts?.map((item) => (
                  <li
                    key={item.id}
                    className="flex flex-wrap gap-4 justify-between items-center border-b border-b-slate-50 py-4 first-of-type:pt-0"
                  >
                    <div className="relative py-5">
                      <div className="absolute right-1 top-1">
                        <Badge
                          content={item?.quantity}
                          className="text-[0.688rem] min-w-5 min-h-fit py-0.5 px-1.5"
                        >
                          {" "}
                        </Badge>
                      </div>
                      <div className="w-[40px] md:w-[55px] border border-slate-50 rounded-md ">
                        <CustomNextImage
                          src={item.product.featureImage}
                          alt={item.product.name}
                          height={55}
                          width={55}
                        />
                      </div>
                    </div>
                    <div className="flex flex-col justify-center flex-1 h-full">
                      <Typography
                        variant="h5"
                        className="text-lg font-medium text-black-500 mb-0 md:mb-2 line-clamp-2 font-box"
                      >
                        {item.product.name}
                      </Typography>
                    </div>
                    <PriceDisplayWithGif item={item} />
                  </li>
                ))}
              </>
            )}
          </DialogBody>
          <DialogFooter className="gap-4 flex justify-center">
            <ButtonCustom
              variant="filled"
              className="!py-3 !text-sm"
              icon={undefined}
              onClick={() => {
                onClose();
              }}
            >
              {scopeT("proceed")}
            </ButtonCustom>
          </DialogFooter>
        </ul>
      </Dialog>
    </>
  );
}

const PriceDisplayWithGif = ({ item }) => {
  const [showGif, setShowGif] = useState(true);

  useEffect(() => {
    // Show gif for 3 seconds then switch to price display
    const timer = setTimeout(() => {
      setShowGif(false);
    }, 1500);

    // Cleanup timer on component unmount
    return () => clearTimeout(timer);
  }, []); // Empty dependency array means this runs once on mount

  return (
    <>
      {showGif ? (
        <CustomNextImage
          src={gift.src}
          alt="Special offer gift"
          width={100}
          height={100}
          className="gift-animation"
        />
      ) : (
        <div className="flex gap-3 items-center">
          <Typography
            variant="h5"
            className="text-2xl font-semibold text-[#9451A0] mb-0 md:mb-3"
          >
            <ProductPriceComponent amount={item.price} />
          </Typography>
          {item.discount > 0 && (
            <Typography
              variant="small"
              className="text-base font-semibold line-through text-black-500 mb-0 md:mb-3"
            >
              <ProductPriceComponent amount={item.originalPrice} />
            </Typography>
          )}
        </div>
      )}
    </>
  );
};
