import { useEffect } from "react";
import cookies from "js-cookie";
import { Button } from "../../index";

export default function CookieNotice({
    id,
    title,
    message,
}: Advices.BlockAdvice) {
    function accepting(id: string, type: "session" | "forever") {
        const notice: any = document.getElementById(id);

        if (type === "session") {
            cookies.set(`accept-${id}`, JSON.stringify({ accept: true }), {
                sameSite: "strict",
                secure: true,
            });
        }

        if (type === "forever") {
            cookies.set(`accept-${id}`, JSON.stringify({ accept: true }), {
                expires: 365,
                sameSite: "strict",
                secure: true,
            });
        }

        notice.classList.remove("flex");
        return notice.classList.add("hidden");
    }

    useEffect(() => {
        const notice: any = document.getElementById(id);
        if (!cookies.get(`accept-${id}`)) {
            notice.classList.add("flex");
            return notice.classList.remove("hidden");
        }
    }, []);

    return (
        <section
            className={`hidden bg-black bg-opacity-30 fixed pointer-events-auto top-0 left-0 h-screen w-screen transition-all`}
            id={id}
        >
            <div className="bg-white darkContainer w-11/12 md:w-4/12 p-12 m-auto rounded-md shadow shadow-gray-900 text-center">
                <h1 className="titleColor darkTitle text-center font-semibold text-xl pb-3">
                    {title}
                </h1>
                <p className="font-normal text text-gray-700 mb-3">{message}</p>
                <div className="md:flex gap-3 justify-center">
                    <div onClick={() => accepting(id, "session")}>
                        <Button.Button1
                            name="Cerrar"
                            ariaLabel="Cerrar anuncio"
                            rel="tag"
                            type="button"
                            target="_self"
                            className="w-full"
                        />
                    </div>
                    <div onClick={() => accepting(id, "forever")}>
                        <Button.Button1
                            name="No volver a mostrar"
                            ariaLabel="No volver a mostrar anuncio"
                            rel="tag"
                            type="button"
                            target="_self"
                            className="w-full"
                        />
                    </div>
                </div>
            </div>
        </section>
    );
}