import _ from "lodash";
import useTranslation from "next-translate/useTranslation";
import Link from "next/link";
import { useRouter } from "next/router";
import { destroyCookie, setCookie } from "nookies";
import { connect } from "react-redux";
import Banner from "../components/banner";
import { setLogout } from "../store/accountDetails/action";

import { signOut } from "next-auth/react";

const Header = (props) => {
    let { t, lang } = useTranslation();

    const router = useRouter();
    const { locale } = router;
    const { setLogout, serviceName } = props;
    const noSignoutLink = [
        "/",
        "/logout",
        "/dns",
        "/dns/[developmentName]",
        "/dns/application-process",
        "/dns/help",
        "/dns/contact-us",
        "/dns/applications",
        "/dns/application-view",
        "/searchresults",
        "/case",
        "/advancedsearch",
        "/advancedsearchresults",
        "/addresssearch",
        "/addresssearchresults",
        "/case/id/[incident]",
        "/case/[ticketnumber]",
        "/dnsapplications",
        "/dnsdetails",
        "/404",
        "/account/register",
        "/myportal/error",
        "/accessibility",
        "/details-about-cookies",
        "/auth/verify-request",
        "/auth/signin",
        "/auth/error",
        "/myportal",
        "/myportal/[appealtypes]",
        "/newappeal/[appealtypes]",
        "/newappeal",
        "/myportal/dnsapplications",
        "/myportal/dns/[developmentName]",
        "/myportal/dnsdetails",
        "/myportal/addresssearch",
        "/myportal/addresssearchresults",
        "/myportal/advancedsearch",
        "/myportal/advancedsearchresults",
        "/myportal/case/[ticketnumber]",
        "/account/personaldetails",
        "/register",
        "/myportal/searchresults",
    ];

    const hasContactLink = [
        "/dns/application-process",
        "/dns/help",
        "/dns/contact-us",
        "/dns/applications",
        "/dns/application-view",
    ];

    let domainSwitch;

    if (process.browser) {
        domainSwitch = window.switchDomain;
    } else {
        domainSwitch = process.env.I18N_DOMAIN;
    }

    const handleLogout = () => {
        console.info("////////////\n" + "logout" + "\n////////////");
        window.localStorage.clear(),
            destroyCookie(null, "next-auth.csrf-token", { path: "/" }),
            destroyCookie(null, "next-auth.callback-url", { path: "/" }),
            destroyCookie(null, "pedw_locale", { path: "/" }),
            destroyCookie(null, "pinsUser", { path: "/" }),
            signOut({
                callbackUrl: locale == "cy" ? "/cy/allgofnodi" : "/logout",
            });
    };

    return (
        <header
            className="govuk-header "
            role="banner"
            data-module="govuk-header"
        >
            <div className="govuk-header__container govuk-width-container">
                <div className="govuk-header__logo govuk-!-width-one-quarter">
                    <Link
                        href={t("common:gov-wales-link")}
                        className="govuk-header__link govuk-link--no-underline govuk-header__link--homepage"
                    >
                        <span className="govuk-header__logotype header__logo">
                            <img
                                alt="gov.wales"
                                src="/assets/images/cymru.svg"
                            />
                        </span>
                    </Link>
                </div>

                <div className="languageSwitch">
                    {/* <div className="mobileNav">
                        <div className="mobileMenu">
                            <input
                                type="radio"
                                id="mobileMenu-1"
                                name="mobileMenu-group-1"
                            />
                            <label htmlFor="mobileMenu-1">
                                {t("common:mobile-nav-label")} <i>▼</i>
                            </label>
                            <div className="mobileMenu close-mobileMenu">
                                <input
                                    type="radio"
                                    id="mobileMenu-close"
                                    name="mobileMenu-group-1"
                                />
                                <label htmlFor="mobileMenu-close">
                                    {t("common:mobile-nav-label")} <i>▲</i>
                                </label>
                            </div>
                            <div className="content">
                                <ul>
                                    {hasContactLink.includes(router.pathname) ==
                                    true ? (
                                        <li>
                                            <Link href="/dns/contact-us">
                                                <a className="govuk-header__link ">
                                                    Contact
                                                </a>
                                            </Link>
                                        </li>
                                    ) : (
                                        ""
                                    )}
                                    {noSignoutLink.includes(router.pathname) ==
                                    true ? (
                                        ""
                                    ) : (
                                        <li>
                                            <a
                                                href={
                                                    router.locale == "cy"
                                                        ? "/allgofnodi"
                                                        : "/logout"
                                                }
                                                onClick={() => {
                                                    setLogout(),
                                                        window.localStorage.clear();
                                                }}
                                                className="govuk-header__link "
                                            >
                                                {t("common:signout-label")}
                                            </a>
                                        </li>
                                    )}

                                    <li>
                                        <Link
                                            href={
                                                locale == "en"
                                                    ? router.query.q != null
                                                        ? router.pathname +
                                                          "?q=" +
                                                          router.query.q
                                                        : router.pathname
                                                    : router.query.q != null
                                                    ? process.env.I18N_DOMAIN +
                                                      "/" +
                                                      router.asPath +
                                                      "?q=" +
                                                      router.query.q
                                                    : router.asPath
                                            }
                                            locale={
                                                locale == "en" ? "cy" : "en"
                                            }
                                            className="govuk-header__link "
                                            lang={locale == "en" ? "cy" : "en"}
                                            hrefLang={
                                                locale == "en" ? "cy" : "en"
                                            }
                                            data-journey-click={
                                                locale == "en"
                                                    ? "link - click:lang-select:Cymraeg"
                                                    : "link - click:lang-select:English"
                                            }
                                            aria-label={
                                                locale == "en"
                                                    ? "Dewiswch Cymraeg"
                                                    : "Select English"
                                            }
                                        >
                                            {" "}
                                            {t("common:available-in")}
                                        </Link>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div> */}
                    <div className="fullNavs">
                        {hasContactLink.includes(router.pathname) == true ? (
                            <Link
                                href="/dns/contact-us"
                                className="govuk-header__link govuk-!-margin-right-3"
                            >
                                Contact
                            </Link>
                        ) : (
                            ""
                        )}
                        {noSignoutLink.includes(router.pathname) == true ? (
                            ""
                        ) : (
                            <Link
                                href={
                                    router.locale == "cy"
                                        ? "/cy/allgofnodi"
                                        : "/logout"
                                }
                                onClick={() => {
                                    handleLogout();
                                }}
                                className="govuk-header__link govuk-!-margin-right-3"
                            >
                                {t("common:signout-label")}
                            </Link>
                        )}

                        <Link
                            href={
                                Object.keys(router.query).length > 0
                                    ? router.pathname +
                                      "?" +
                                      Object.keys(router.query)
                                          .map(
                                              (key) =>
                                                  key + "=" + router.query[key]
                                          )
                                          .join("&")
                                    : router.pathname
                            }
                            locale={locale == "en" ? "cy" : "en"}
                            className="govuk-header__link "
                            lang={locale == "en" ? "cy" : "en"}
                            hrefLang={locale == "en" ? "cy" : "en"}
                            data-journey-click={
                                locale == "en"
                                    ? "link - click:lang-select:Cymraeg"
                                    : "link - click:lang-select:English"
                            }
                            aria-label={
                                locale == "en"
                                    ? "Dewiswch Cymraeg"
                                    : "Select English"
                            }
                            onClick={() => {
                                setCookie(
                                    null,
                                    "pedw_locale",
                                    locale == "en" ? "cy" : "en",
                                    {
                                        path: "/",
                                    }
                                );
                            }}
                        >
                            {" "}
                            {t("common:available-in")}
                        </Link>
                    </div>
                </div>
            </div>
            <Banner />
        </header>
    );
};
const mapDispatchToProps = (dispatch) => {
    return {
        setLogout: () => {
            dispatch(setLogout());
        },
    };
};

export default connect(null, mapDispatchToProps)(Header);