import CookieConsent from "react-cookie-consent";
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import cookie from "cookie-cutter";
import { useState, useEffect } from "react";

const CookieBanner = () => {
    let { t, lang } = useTranslation();
    const router = useRouter();
    const { locale } = router;

    const [bannerVisible, setBannerVisible] = useState(true);

    const accept = () => {
        let now = new Date();
        let expDate = new Date(now);

        expDate.setDate(now.getDate() + 365);

        console.log(expDate);
        cookie.set("planning_casework", true, {
            expires: expDate,
        });
        setBannerVisible(false);
    };

    return (
        <>
            {bannerVisible ? (
                <CookieConsent
                    style={{
                        position: "inherit",
                        background: "#eeeeee",
                        display: "block",
                    }}
                    containerClasses="app-cookie-banner"
                    buttonClasses="cookies-banner__button"
                    buttonWrapperClasses="govuk-width-container consentBanner hidden"
                    declineButtonClasses="cookies-banner__button"
                    buttonText={t("common:cookie-banner-accept")}
                    declineButtonText={t("common:cookie-banner-decline")}
                    disableStyles={true}
                    enableDeclineButton={true}
                    flipButtons={true}
                    hideOnAccept={true}
                    cookieName="planning_casework"
                >
                    <div className="app-cookie-banner">
                        <div
                            id="global-cookie-message"
                            className="govuk-clearfix"
                            data-module="cookie-banner"
                            role="region"
                            aria-label="cookie banner"
                            data-nosnippet=""
                        >
                            <div className="govuk-width-container">
                                <div className="govuk-grid-row">
                                    <div className="govuk-grid-column-two-thirds">
                                        <div className="">
                                            <p className="cookies-banner__description">
                                                {t(
                                                    "common:cookie-banner-line-1"
                                                )}
                                            </p>
                                            <ul className="cookies-banner__description">
                                                <li>
                                                    {" "}
                                                    {t(
                                                        "common:cookie-banner-list-item-1"
                                                    )}
                                                </li>
                                            </ul>
                                            <p className="cookies-banner__description">
                                                {t(
                                                    "common:cookie-banner-line-2"
                                                )}
                                            </p>
                                            <ul className="cookies-banner__description">
                                                <li>
                                                    {t(
                                                        "common:cookie-banner-list-item-2"
                                                    )}
                                                </li>
                                                <li>
                                                    {t(
                                                        "common:cookie-banner-list-item-3"
                                                    )}
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="govuk-width-container consentBannerShow">
                            <button
                                className="cookies-banner__button"
                                id="rcc-confirm-button"
                                aria-label="Accept cookies"
                                onClick={() => {
                                    accept();
                                }}
                            >
                                {t("common:cookie-banner-accept")}
                            </button>

                            <Link href="/help/cookies">
                                <a
                                    className="cookies-banner__button govuk-link--no-underline"
                                    id="rcc-decline-button"
                                    aria-label="Decline cookies"
                                >
                                    {t("common:cookie-banner-change-settings")}
                                </a>
                            </Link>
                        </div>
                    </div>
                </CookieConsent>
            ) : (
                ""
            )}
        </>
    );
};

export default CookieBanner;