import Link from "next/link";
import { useState } from "react";
import Cookies from "js-cookie";
import { useEffect, type MouseEvent } from "react";
import { X } from "lucide-react";
import type { Banners } from "~/schemas/public/Banners";
import { cn } from "~/lib/utils";
import { IconMatrix, type IconType } from "~/components/IconComponents";

export const BannerFactory = (bannerData: Banners) => {
  const NEW_BANNER_KEY = `bannercookie_${bannerData.idbanner}`;

  let bgColor = "";
  let accentColor = "";
  let closeHoverColor = "";

  switch (bannerData.color) {
    case "blu":
      bgColor = "bg-blue-600";
      accentColor = "bg-blue-800";
      closeHoverColor = "hover:bg-blue-500";
      break;
    case "rosso":
      bgColor = "bg-red-600";
      accentColor = "bg-red-800";
      closeHoverColor = "hover:bg-red-500";
      break;
    case "verde":
      bgColor = "bg-green-600";
      accentColor = "bg-green-800";
      closeHoverColor = "hover:bg-green-500";
      break;
    case "indaco":
      bgColor = "bg-indigo-600";
      accentColor = "bg-indigo-800";
      closeHoverColor = "hover:bg-indigo-500";
      break;
    case null:
    default:
      bgColor = "bg-indigo-600";
      accentColor = "bg-indigo-800";
      closeHoverColor = "hover:bg-indigo-500";
      break;
  }

  const NewBanner = () => {
    const [isBannerToShow, setIsBannerToShow] = useState(false);

    useEffect(() => {
      if (bannerData.is_unskippable === false) {
        const cookievalue = Cookies.get(NEW_BANNER_KEY) !== "true";
        setIsBannerToShow(cookievalue);
      }
    }, []);

    const onClick = (e: MouseEvent<HTMLButtonElement>) => {
      e.preventDefault();

      Cookies.set(NEW_BANNER_KEY, "true", {
        expires: bannerData.hide_duration || 365,
      });
      setIsBannerToShow(false);
    };

    if (!isBannerToShow && bannerData.is_unskippable === false) {
      return null;
    }
    return (
      <div className={cn("bg-indigo-600", bgColor)}>
        <div className="mx-auto flex max-w-screen-xl items-start justify-between px-4 py-3 text-white sm:items-center md:px-8">
          <div className="flex flex-1 items-start justify-center gap-x-4 sm:items-center">
            <div
              className={cn(
                "flex flex-none items-center justify-center rounded-full bg-indigo-800 p-1.5 px-4 text-sm font-medium",
                accentColor,
              )}
            >
              {bannerData.titolo}{" "}
            </div>
            <p className="flex gap-2 p-2 font-medium">
              <span> {bannerData.testo}</span>

              {bannerData.has_cta &&
                bannerData.cta_href &&
                bannerData.cta_icon && (
                  <Link
                    href={bannerData.cta_href}
                    className="inline-flex items-center gap-x-1 font-semibold underline duration-150 hover:text-indigo-100"
                  >
                    {bannerData.cta_text}
                    <IconMatrix
                      type={bannerData.cta_icon as IconType}
                      className="size-4"
                    />
                  </Link>
                )}
            </p>
          </div>
          {bannerData.is_unskippable === false && (
            <button
              className={cn(
                "rounded-lg p-2 ring-offset-2 duration-150 hover:bg-indigo-500 focus:ring",
                closeHoverColor,
              )}
              onClick={onClick}
            >
              <X className="size-5" />
            </button>
          )}
        </div>
      </div>
    );
  };
  return <NewBanner />;
};
