import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import Banner from "../components/banner";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
import { setLogout } from "../store/accountDetails/action";
const Header = (props) => {
    let { t, lang } = useTranslation();

    const router = useRouter();
    const { locale } = router;
    const { setLogout, serviceName } = props;
    const noSignoutLink = [
        "/",
        "/logout",
        "/dns",
        "/dns/application-process",
        "/dns/help",
        "/dns/contact-us",
        "/dns/applications",
        "/dns/application-view",
        "/searchresults",
        "/case",
        "/advancedsearch",
        "/advancedsearchresults",
        "/dnsapplications",
        "/dnsdetails",
        "/404",
    ];
    const hasContactLink = [
        "/dns",
        "/dns/application-process",
        "/dns/help",
        "/dns/contact-us",
        "/dns/applications",
        "/dns/application-view",
    ];

    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")}>
                        <a className="govuk-header__link govuk-header__link--homepage">
                            <span className="govuk-header__logotype header__logo">
                                <img src="/assets/images/cymru.svg" />
                            </span>
                        </a>
                    </Link>
                </div>

                {/* <div className="govuk-header__content govuk-!-width-one-half govuk-!-margin-top-3">
                    <Link
                        href={router.locale == "cy" ? "/allgofnodi" : "/logout"}
                    >
                        <a
                            onClick={() => {
                                window.localStorage.clear();
                            }}
                            className="govuk-header__link
                        govuk-header__link--service-name"
                        >
                            {serviceName || t("common:service-name")}
                        </a>
                    </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>
                                            <Link
                                                href={
                                                    router.locale == "cy"
                                                        ? "/allgofnodi"
                                                        : "/logout"
                                                }
                                            >
                                                <a
                                                    onClick={() => {
                                                        window.localStorage.clear();
                                                    }}
                                                    className="govuk-header__link "
                                                >
                                                    {t("common:signout-label")}
                                                </a>
                                            </Link>
                                        </li>
                                    )}

                                    <li>
                                        <Link
                                            href={
                                                locale == "en"
                                                    ? router.query.q != null
                                                        ? router.pathname +
                                                          "?q=" +
                                                          router.query.q
                                                        : router.pathname
                                                    : router.query.q != null
                                                    ? router.pathname +
                                                      "?q=" +
                                                      router.query.q
                                                    : router.pathname
                                            }
                                            locale={
                                                locale == "en" ? "cy" : "en"
                                            }
                                        >
                                            <a
                                                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")}
                                            </a>
                                        </Link>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div className="fullNav">
                        {hasContactLink.includes(router.pathname) == true ? (
                            <Link href="/dns/contact-us">
                                <a className="govuk-header__link govuk-!-margin-right-3">
                                    Contact
                                </a>
                            </Link>
                        ) : (
                            ""
                        )}
                        {noSignoutLink.includes(router.pathname) == true ? (
                            ""
                        ) : (
                            <Link
                                href={
                                    router.locale == "cy"
                                        ? "/allgofnodi"
                                        : "/logout"
                                }
                            >
                                <a
                                    onClick={() => {
                                        window.localStorage.clear();
                                    }}
                                    className="govuk-header__link govuk-!-margin-right-3"
                                >
                                    {t("common:signout-label")}
                                </a>
                            </Link>
                        )}

                        <Link
                            href={
                                locale == "en"
                                    ? router.query.q != null
                                        ? router.pathname +
                                          "?q=" +
                                          router.query.q
                                        : router.pathname
                                    : router.query.q != null
                                    ? router.pathname + "?q=" + router.query.q
                                    : router.pathname
                            }
                            locale={locale == "en" ? "cy" : "en"}
                        >
                            <a
                                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")}
                            </a>
                        </Link>
                    </div>
                </div>
            </div>
            <Banner />
        </header>
    );
};
const mapDispatchToProps = (dispatch) => {
    return {
        setLogout: () => {
            dispatch(setLogout());
        },
    };
};

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