import useTranslation from "next-translate/useTranslation";
import Link from "next/link";
import { useRouter } from "next/router";
import { parseCookies } from "nookies";
import { useState } from "react";
import { connect } from "react-redux";
import { reduxForm } from "redux-form";

import cookie from "cookie-cutter";

const CookieManagementMain = (props) => {
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;

    const { handleSubmit } = props;

    const onHandleSubmit = (values) => {
        Object.assign(values, {
            "essential": "accepted",
            "usage": usageState,
            "analytics_storage":
                usageState == "accepted" ? "granted" : "denied",
            // "communications": communicationsState,
            "settings": settingsState,
        });

        let now = new Date();
        let expDate = new Date(now);
        expDate.setDate(now.getDate() + 365);

        cookie.set("CookiePolicy", JSON.stringify(values).toString(), {
            expires: expDate,
            path: "/",
        });

        function delete_cookie(name, path, domain) {
            document.cookie =
                name +
                "=" +
                (path ? ";path=" + path : "") +
                (domain ? ";domain=" + domain : "") +
                ";expires=Thu, 01 Jan 1970 00:00:01 GMT";
        }

        usageState == "revoked" && delete_cookie("_ga", "/"),
            delete_cookie("_gid", "/");

        cookie.set("planning_casework", true, {
            expires: expDate,
            path: "/",
        });

        setSavedState(true);
    };

    let cookieCheck = parseCookies();

    let cookieObj =
        typeof cookieCheck.CookiePolicy == "undefined"
            ? {}
            : JSON.parse(cookieCheck.CookiePolicy);

    const [savedState, setSavedState] = useState(false);

    const [usageState, setUsageState] = useState(
        typeof cookieCheck.CookiePolicy == "undefined" ? null : cookieObj.usage
    );
    //const [communicationsState, setCommunicationsState] = useState(
    //     typeof cookieCheck.CookiePolicy == "undefined"
    //         ? null
    //         : cookieObj.communications
    // );
    const [settingsState, setSettingsState] = useState(
        typeof cookieCheck.CookiePolicy == "undefined"
            ? null
            : cookieObj.settings
    );

    let updateObj = (key, value) => {
        switch (key) {
            case "usage":
                setUsageState(value);
                break;
            // case "communications":
            //     setCommunicationsState(value);
            //     break;
            case "settings":
                setSettingsState(value);
                break;
            default:
            // code block
        }
    };

    const CookieForm = () => {
        return (
            <main
                className="govuk-main-wrapper govuk-!-padding-top-9 govuk-main-wrapper--auto-spacing"
                id="main-content"
                role="main"
            >
                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-full">
                        <h1 className="govuk-heading-l govuk-!-margin-bottom-5">
                            {t("cookies:cookie-title-heading")}
                        </h1>
                        <hr className="govuk-section-break govuk-section-break--visible" />

                        {savedState && (
                            <div
                                id="cookieSettingsMessageSuccess"
                                className="govuk-inset-text paragraph--type--call-out-message call-out-type-positive-alert-message"
                            >
                                <h2 className="govuk-heading-l">
                                    <strong>
                                        {t("cookies:cookie-saved-heading")}
                                    </strong>
                                </h2>
                                <p className="govuk-body">
                                    {t("cookies:cookie-saved-paragraph")}
                                </p>
                            </div>
                        )}
                        {typeof cookieCheck.CookiePolicy == "undefined" ? (
                            <>
                                <div className="govuk-inset-text paragraph--type--call-out-message">
                                    <h2 className="govuk-heading-l">
                                        {t("cookies:cookie-not-saved-heading")}
                                    </h2>
                                    <p className="govuk-body">
                                        {t(
                                            "cookies:cookie-not-saved-paragraph"
                                        )}
                                    </p>
                                </div>
                            </>
                        ) : (
                            ""
                        )}

                        <div
                            className={
                                typeof cookieCheck.CookiePolicy != "undefined"
                                    ? "govuk-body govuk-!-margin-top-5"
                                    : "govuk-body"
                            }
                        >
                            <p className="govuk-body">
                                {t("cookies:cookie-intro-paragraph-1")}
                            </p>
                            <p className="govuk-body">
                                {t("cookies:cookie-intro-paragraph-2")}
                            </p>

                            <p className="govuk-body">
                                {t("cookies:cookie-intro-paragraph-3")}
                            </p>
                        </div>
                        <div id="cookies-js">
                            <form onSubmit={handleSubmit(onHandleSubmit)}>
                                <div>
                                    <h3 className="govuk-heading-l">
                                        {t("cookies:cookie-settings-heading")}
                                    </h3>
                                </div>
                                <fieldset className="govuk-fieldset">
                                    <legend className="govuk-fieldset__legend">
                                        <h4 className="govuk-!-font-size-27">
                                            {t(
                                                "cookies:cookie-settings-usage-heading"
                                            )}
                                        </h4>
                                        <p className="govuk-body">
                                            {t(
                                                "cookies:cookie-settings-usage-paragraph-1"
                                            )}
                                        </p>

                                        <ul className="govuk-list govuk-list--bullet">
                                            <li>
                                                {t(
                                                    "cookies:cookie-settings-usage-list-item-1"
                                                )}
                                            </li>
                                            <li>
                                                {t(
                                                    "cookies:cookie-settings-usage-list-item-2"
                                                )}
                                            </li>

                                            <li>
                                                {t(
                                                    "cookies:cookie-settings-usage-list-item-3"
                                                )}
                                            </li>
                                        </ul>
                                        <p className="govuk-body">
                                            {t(
                                                "cookies:cookie-settings-usage-list-item-4"
                                            )}
                                        </p>
                                        <div className="govuk-radios govuk-radios--small">
                                            <div className="govuk-radios__item">
                                                <input
                                                    name="usage"
                                                    className="govuk-radios__input"
                                                    id="usage-1"
                                                    type="radio"
                                                    value="revoked"
                                                    checked={
                                                        usageState === "revoked"
                                                    }
                                                    onChange={() => {
                                                        updateObj(
                                                            "usage",
                                                            "revoked"
                                                        );
                                                    }}
                                                />
                                                <label
                                                    className="govuk-label govuk-radios__label"
                                                    htmlFor="usage-1"
                                                >
                                                    {t(
                                                        "cookies:cookie-settings-usage-radio-1-label"
                                                    )}
                                                </label>
                                            </div>
                                            <div className="govuk-radios__item">
                                                <input
                                                    className="govuk-radios__input"
                                                    id="usage-2"
                                                    name="usage"
                                                    type="radio"
                                                    value="accepted"
                                                    checked={
                                                        usageState ===
                                                        "accepted"
                                                    }
                                                    onChange={() => {
                                                        updateObj(
                                                            "usage",
                                                            "accepted"
                                                        );
                                                    }}
                                                />
                                                <label
                                                    className="govuk-label govuk-radios__label"
                                                    htmlFor="usage-2"
                                                >
                                                    {t(
                                                        "cookies:cookie-settings-usage-radio-2-label"
                                                    )}
                                                </label>
                                            </div>
                                        </div>
                                    </legend>
                                </fieldset>
                                {/* <fieldset className="govuk-fieldset">
                                    <legend className="govuk-fieldset__legend">
                                        <h4 className="govuk-!-font-size-27">
                                            {t(
                                                "cookies:cookie-settings-communications-heading"
                                            )}
                                        </h4>
                                        <p className="govuk-body">
                                            {t(
                                                "cookies:cookie-settings-communications-paragraph-1"
                                            )}
                                        </p>
                                    </legend>
                                    <div className="govuk-radios govuk-radios--small">
                                        <div className="govuk-radios__item">
                                            <input
                                                className="govuk-radios__input"
                                                id="communications-1"
                                                name="communications"
                                                type="radio"
                                                value="revoked"
                                                component="input"
                                                checked={
                                                    communicationsState ===
                                                    "revoked"
                                                }
                                                onChange={() => {
                                                    updateObj(
                                                        "communications",
                                                        "revoked"
                                                    );
                                                }}
                                            />
                                            <label
                                                className="govuk-label govuk-radios__label"
                                                htmlFor="communications-1"
                                            >
                                                {t(
                                                    "cookies:cookie-settings-communications-radio-1-label"
                                                )}
                                            </label>
                                        </div>
                                        <div className="govuk-radios__item">
                                            <input
                                                className="govuk-radios__input"
                                                id="communications-2"
                                                name="communications"
                                                type="radio"
                                                value="accepted"
                                                component="input"
                                                checked={
                                                    communicationsState ===
                                                    "accepted"
                                                }
                                                onChange={() => {
                                                    updateObj(
                                                        "communications",
                                                        "accepted"
                                                    );
                                                }}
                                            />
                                            <label
                                                className="govuk-label govuk-radios__label"
                                                htmlFor="communications-2"
                                            >
                                                {t(
                                                    "cookies:cookie-settings-communications-radio-2-label"
                                                )}
                                            </label>
                                        </div>
                                    </div>
                                </fieldset> */}

                                <fieldset className="govuk-fieldset">
                                    <legend className="govuk-fieldset__legend">
                                        <h4 className="govuk-!-font-size-27">
                                            {t(
                                                "cookies:cookie-settings-settings-heading"
                                            )}
                                        </h4>
                                        <p className="govuk-body">
                                            {t(
                                                "cookies:cookie-settings-settings-paragraph-1"
                                            )}
                                        </p>
                                    </legend>
                                    <div className="govuk-radios govuk-radios--small">
                                        <div className="govuk-radios__item">
                                            <input
                                                className="govuk-radios__input"
                                                id="settings-1"
                                                name="settings"
                                                type="radio"
                                                value="revoked"
                                                checked={
                                                    settingsState === "revoked"
                                                }
                                                onChange={() => {
                                                    updateObj(
                                                        "settings",
                                                        "revoked"
                                                    );
                                                }}
                                            />
                                            <label
                                                className="govuk-label govuk-radios__label"
                                                htmlFor="settings-1"
                                            >
                                                {t(
                                                    "cookies:cookie-settings-settings-radio-1-label"
                                                )}
                                            </label>
                                        </div>
                                        <div className="govuk-radios__item">
                                            <input
                                                className="govuk-radios__input"
                                                id="settings-2"
                                                name="settings"
                                                type="radio"
                                                value="accepted"
                                                checked={
                                                    settingsState === "accepted"
                                                }
                                                onChange={() => {
                                                    updateObj(
                                                        "settings",
                                                        "accepted"
                                                    );
                                                }}
                                            />
                                            <label
                                                className="govuk-label govuk-radios__label"
                                                htmlFor="settings-2"
                                            >
                                                {t(
                                                    "cookies:cookie-settings-settings-radio-2-label"
                                                )}
                                            </label>
                                        </div>
                                    </div>
                                </fieldset>
                                <fieldset className="govuk-fieldset">
                                    <legend className="govuk-fieldset__legend">
                                        <h4 className="govuk-!-font-size-27">
                                            {t(
                                                "cookies:cookie-settings-essential-heading"
                                            )}
                                        </h4>
                                        <p className="govuk-body">
                                            {t(
                                                "cookies:cookie-settings-essential-paragraph-1"
                                            )}
                                        </p>
                                        <ul className="govuk-list govuk-list--bullet">
                                            <li>
                                                {t(
                                                    "cookies:cookie-settings-essential-list-item-1"
                                                )}
                                            </li>
                                            <li>
                                                {t(
                                                    "cookies:cookie-settings-essential-list-item-2"
                                                )}
                                            </li>
                                        </ul>
                                        <p className="govuk-body">
                                            {t(
                                                "cookies:cookie-settings-essential-paragraph-2"
                                            )}
                                        </p>
                                        <p className="govuk-body">
                                            <Link
                                                href={t(
                                                    "cookies:cookie-settings-essential-link"
                                                )}
                                                className="govuk-link govuk-link--no-underline govuk-!-font-weight-bold"
                                            >
                                                {t(
                                                    "cookies:cookie-settings-essential-link-label"
                                                )}
                                            </Link>
                                        </p>
                                    </legend>
                                </fieldset>
                                <div>
                                    <button
                                        type="submit"
                                        className="govuk-button "
                                    >
                                        {t(
                                            "cookies:cookie-settings-save-button-label"
                                        )}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </main>
        );
    };

    return (
        <>
            <CookieForm />
        </>
    );
};

const mapStateToProps = (state) => {
    return {
        initialValues: {
            usage: state.accountDetails.cookieObj.usage,
            //communications: state.accountDetails.cookieObj.communications,
            settings: state.accountDetails.cookieObj.settings,
        },
    };
};

export default connect(mapStateToProps)(
    reduxForm({
        form: "CookieManagementForm",
        enableReinitialize: true,
    })(CookieManagementMain)
);