"use client";
import { useEffect } from "react";

import { VariantProps, cva } from "class-variance-authority";
import { AlertTriangle, Check, Info, Siren } from "lucide-react";

import { cn } from "@/lib/utils";
import React from "react";

export type CustomNotificationType = {
    text: string;
    severity?: "success" | "info" | "warning" | "error";
    // userType?: "internal" | "external";
    targetPermission?: string;
    endOfLife?: number;
};

type CustomNotificationProps = CustomNotificationType &
    React.ComponentProps<"div">;

const custonNotificationsContainerVariants = cva("flex px-2 py-1.5", {
    variants: {
        severity: {
            warning:
                "bg-amber-500 bg-opacity-10  dark:bg-amber-900 dark:bg-opacity-30",
            success:
                "bg-lime-500 bg-opacity-10  dark:bg-lime-900 dark:bg-opacity-30",
            info: "bg-lime-500 bg-opacity-10  dark:bg-lime-900 dark:bg-opacity-30",
            error: "bg-amber-500 bg-opacity-10  dark:bg-amber-900 dark:bg-opacity-30",
        },
    },
    defaultVariants: {
        severity: "warning",
    },
});

const custonNotificationsTextVariants = cva(
    "flex items-center gap-3 text-sm leading-6",
    {
        variants: {
            severity: {
                warning: "text-amber-500 dark:text-amber-400",
                success: "text-lime-600 dark:text-lime-400",
                info: "text-lime-600 dark:text-lime-400",
                error: "text-amber-500 dark:text-amber-400",
            },
        },
        defaultVariants: {
            severity: "warning",
        },
    }
);

const getIcon = (severity: string) => {
    switch (severity) {
        case "warning":
            return <AlertTriangle size={24} strokeWidth={1.5} />;
        case "success":
            return <Check size={24} strokeWidth={1.5} />;
        case "info":
            return <Info size={24} strokeWidth={1.5} />;
        case "error":
            return <Siren size={24} strokeWidth={1.5} />;
        default:
            return <AlertTriangle size={24} strokeWidth={1.5} />;
    }
};

export const CustomNotification = React.forwardRef<
    HTMLDivElement,
    CustomNotificationProps
>(
    (
        {
            text,
            severity = "warning",
            // userType = "internal",
            targetPermission,
            endOfLife = 30,
            className,
            ...props
        },
        ref
    ) => {
        const [show, setShow] = React.useState(true);
        const [initialTimeDifference, setInitialTimeDifference] =
            React.useState<number | null>(null);

        // useEffect(() => {
        //     const savedTimeDifference = localStorage.getItem("timeDifference");

        //     if (savedTimeDifference) {
        //         setInitialTimeDifference(Number(savedTimeDifference));
        //     }

        //     const endOfLifeMinutes = endOfLife * 60 * 1000;
        //     console.log(endOfLifeMinutes, "endOfLifeMinutes");

        //     const currentDate = new Date();

        //     const hideTime = new Date(currentDate.getTime() + endOfLifeMinutes);

        //     const timeDifference = hideTime.getTime() - currentDate.getTime();

        //     if (!savedTimeDifference) {
        //         localStorage.setItem(
        //             "timeDifference",
        //             timeDifference.toString()
        //         );
        //         setInitialTimeDifference(timeDifference);
        //     }

        //     console.log(timeDifference, "timeDifference");

        //     if (initialTimeDifference && initialTimeDifference < 0) {
        //         setShow(false);
        //         localStorage.removeItem("timeDifference");
        //         return;
        //     }

        //     if (initialTimeDifference && initialTimeDifference > 0)
        //         setShow(true);

        //     const timer = setTimeout(() => {
        //         setShow(false);
        //     }, initialTimeDifference ?? 0);

        //     return () => clearTimeout(timer);
        // }, [endOfLife, initialTimeDifference]);

        // if (!show) return null;

        return (
            <div
                className={cn(
                    custonNotificationsContainerVariants({
                        severity,
                        className,
                    })
                )}
                ref={ref}
                {...props}
            >
                <p
                    className={cn(
                        custonNotificationsTextVariants({
                            severity,
                            className,
                        })
                    )}
                >
                    {getIcon(severity)}
                    <span className="font-normal flex-1">{text}</span>
                </p>
            </div>
        );
    }
);

CustomNotification.displayName = "CustomNotification";

export default CustomNotification;