import useTranslation from "next-translate/useTranslation";
import Link from "next/link";
import { useRouter } from "next/router";
import { connect } from "react-redux";

import { useSession } from "next-auth/react";
import { setCurrentView } from "../store/currentView/action";
import { change } from "redux-form";

import { setCurrentSection } from "../store/appealType/action";
import {
    setRepresentationCapacity,
    setRepresentationSubmit
} from "../store/currentView/action";
import { resolveCaseBreadcrumbState } from "../lib/routing/routeState";
import {
    buildBreadcrumbRendererMaps,
    resolveMappedRouteRenderer as resolveMappedRouteRendererByMaps
} from "../lib/routing/breadcrumbRouteMaps";
import { createMappedRouteRendererGroups } from "../lib/routing/breadcrumbRendererFactories";

const Breadcrumbs = (props) => {
    const {
        currentView,
        setCurrentSection,
        setRepresentationSubmit,
        appealType,
        showQuestionnaireSection,
        setShowQuestionnaireSection
    } = props;
    const router = useRouter();
    let { t } = useTranslation();

    const { data: session } = useSession();

    const nestedProps = props?.props || {};
    const nestedSearchString = nestedProps?.search?.searchString || "";
    const nestedCurrentReference =
        nestedProps?.currentView?.caseReference?.currentReference || "";

    const isWelsh = router.locale === "cy";
    const localisedPath = (englishPath, welshSuffixPath) =>
        isWelsh ? `/${router.locale}${welshSuffixPath}` : englishPath;

    const currentReference =
        currentView?.caseReference?.currentReference || nestedCurrentReference;
    const fallbackSearchTitle =
        props?.searchResultsObj?.searchResultsObj?.value?.[0]?.title || "";
    const caseReferenceDisplay = currentReference || fallbackSearchTitle;

    const myPortalHref = localisedPath("/myportal", "/fymhorth");
    const cyMyPortalHref = myPortalHref;
    const pathname = router.pathname;
    const isPath = (path) => pathname === path;
    const caseReference = currentView?.caseReference || {};
    const currentViewState = currentView?.currentView || {};
    const repDetails = caseReference?.repDetails;
    const hasRepDetails = Object.prototype.hasOwnProperty.call(
        caseReference,
        "repDetails"
    );

    const qcount =
        caseReference.appealType === 846040000 ||
        caseReference.appealType === 846040001 ||
        caseReference.appealType === 846040025 ||
        caseReference.appealType === 846040004 ||
        caseReference.appealType === 846040018 ||
        caseReference.appealType === 846040003 ||
        caseReference.appealType === 846040009 ||
        caseReference.appealType === 846040008
            ? 7
            : caseReference.appealType === 846040005 ||
                caseReference.appealType === 846040006 ||
                caseReference.appealType === 846040007
              ? 9
              : "";

    const hideServiceNamePaths = [
        "/myportal/[appealtypes]",
        "/newappeal",
        "/newappeal/[appealtypes]",
        "/myportal/representation"
    ];
    const shouldShowServiceName = !hideServiceNamePaths.includes(pathname);

    const getViewAllLabel = (viewKey) => {
        const labelsByKey = {
            awaitingSubmissionDetails: () =>
                t("myportal:awatitingsubmission-card-title"),
            watchedCases: () => t("myportal:watchedcases-card-title"),
            myCases: () => t("myportal:mycases-card-title"),
            myRepresentations: () => t("myportal:myrepresentations-card-title"),
            mySubmittedReps: "Submitted representations"
        };

        const viewAllLabelResolver = labelsByKey[viewKey];
        return typeof viewAllLabelResolver === "function"
            ? viewAllLabelResolver()
            : viewAllLabelResolver || null;
    };

    const getStaticTextCrumbLabel = (path) => {
        const staticTextCrumbByPath = {
            "/account/register": () =>
                t("account:register-new-account-heading"),
            "/dns": () => t("dnsCommon:service-name"),
            "/dns/application-process": () => "Guidance",
            "/dns/help": () => "Help",
            "/dns/contact-us": () => t("common:footer-contact-us-link-label"),
            "/dns/applications": () => t("dnsApplications:page-title"),
            "/help/cookies": () => t("cookies:cookie-breadcrumb"),
            "/privacy": () => t("common:footer-privacy-link-label"),
            "/accessibility": () => t("common:footer-accessibility-link-label"),
            "/details-about-cookies": () =>
                t("cookies:cookie-policy-title-heading"),
            "/auth/signin": () => t("auth:auth-page-title"),
            "/auth/verify-request": () => t("auth:auth-check-email-page-title"),
            "/auth/error": () => t("auth:auth-error-signin-error-title")
        };

        const staticTextCrumbResolver = staticTextCrumbByPath[path];
        return staticTextCrumbResolver ? staticTextCrumbResolver() : null;
    };

    const renderMyPortalCrumb = () => (
        <li className="govuk-breadcrumbs__list-item">
            <Link href={myPortalHref} className="govuk-breadcrumbs__link">
                {t("common:breadcrumb-my-portal")}
            </Link>
        </li>
    );

    const renderMyPortalSectionCrumbs = (sectionLabel) => (
        <>
            {renderMyPortalCrumb()}
            {renderTextCrumb(sectionLabel)}
        </>
    );

    const renderCaseReferenceCrumb = (referenceValue) => (
        <li className="govuk-breadcrumbs__list-item">
            {t("common:breadcrumb-case-reference")}: {referenceValue}
        </li>
    );

    const renderTextCrumb = (label) => (
        <li className="govuk-breadcrumbs__list-item">{label}</li>
    );

    const renderLinkCrumb = (href, label, onClick) => (
        <li className="govuk-breadcrumbs__list-item">
            <Link
                href={href}
                onClick={onClick}
                className="govuk-breadcrumbs__link"
            >
                {label}
            </Link>
        </li>
    );

    const renderAnchorCrumb = (
        href,
        label,
        onClick,
        listItemClass = "govuk-breadcrumbs__list-item"
    ) => (
        <li className={listItemClass}>
            <a
                className="govuk-breadcrumbs__link"
                href={href}
                onClick={onClick}
            >
                {label}
            </a>
        </li>
    );

    const renderBackCrumb = (
        onClick,
        listItemClass = "govuk-breadcrumbs__list-item backChevron"
    ) => renderAnchorCrumb("#", t("common:back-link"), onClick, listItemClass);

    const renderDnsCaseReferenceCrumbs = (referenceValue) => (
        <>
            {renderLinkCrumb(
                isWelsh
                    ? `/${router.locale}/dnsapplications`
                    : "/dnsapplications",
                t("dnsCommon:service-name")
            )}
            {renderCaseReferenceCrumb(referenceValue)}
        </>
    );

    const resolveMappedRouteRenderer = (path) => {
        return resolveMappedRouteRendererByMaps(path, mappedRouteRendererMaps);
    };

    const renderMappedRoute = (path, resolver = resolveMappedRouteRenderer) => {
        const routeRenderer = resolver(path);
        return routeRenderer ? routeRenderer() : null;
    };

    const { breadcrumbHref, caseResultsHref, breadcrumbLabel } =
        resolveCaseBreadcrumbState({
            query: router.query,
            hasSession: Boolean(session),
            getViewAllLabel,
            advancedLabel: t("common:breadcrumb-advanced-search-results"),
            addressLabel: t("common:breadcrumb-address-search-results"),
            defaultLabel: t("common:breadcrumb-search-results")
        });

    const {
        simpleRouteRenderersByPath,
        simpleLinkTextPairRenderersByPath,
        simpleMyPortalRouteRenderersByPath,
        newAppealRouteRenderersByPath,
        callbackRouteRenderersByPath,
        stepBackRouteRenderersByPath,
        representationRouteRenderersByPath,
        caseDetailRouteRenderersByPath,
        detailAndAccountRouteRenderersByPath
    } = createMappedRouteRendererGroups({
        t,
        router,
        isWelsh,
        myPortalHref,
        cyMyPortalHref,
        currentViewState,
        getViewAllLabel,
        caseResultsHref,
        breadcrumbLabel,
        fallbackSearchTitle,
        currentReference,
        nestedSearchString,
        caseReferenceDisplay,
        onBack: () => {
            router.back();
        },
        currentSection: appealType.currentSection,
        onStepBack: () => {
            setCurrentSection(appealType.currentSection - 1);
        },
        onStepBackWithInlineClass: () => {
            setCurrentSection(appealType.currentSection - 1);
        },
        currentView,
        hasRepDetails,
        repDetails,
        showQuestionnaireSection,
        onRepresentationSubmitBackFromConfirmation: () => {
            setRepresentationSubmit(qcount);
        },
        onRepresentationSubmitBackToDetails: () => {
            setRepresentationSubmit(false);
        },
        onRepresentationQuestionnaireBack: () => {
            setShowQuestionnaireSection(showQuestionnaireSection - 1);
            setRepresentationSubmit(false);
        },
        renderAnchorCrumb,
        renderLinkCrumb,
        renderTextCrumb,
        renderCaseReferenceCrumb,
        renderMyPortalCrumb,
        renderMyPortalSectionCrumbs,
        renderDnsCaseReferenceCrumbs,
        renderBackCrumb
    });

    const mappedRouteRendererMaps = buildBreadcrumbRendererMaps({
        simpleRouteRenderersByPath,
        simpleLinkTextPairRenderersByPath,
        simpleMyPortalRouteRenderersByPath,
        newAppealRouteRenderersByPath,
        callbackRouteRenderersByPath,
        stepBackRouteRenderersByPath,
        representationRouteRenderersByPath,
        caseDetailRouteRenderersByPath,
        detailAndAccountRouteRenderersByPath
    });

    const staticTextCrumbLabel = getStaticTextCrumbLabel(pathname);

    return (
        <>
            <nav
                aria-label={"Breadcrumb for PEDW"}
                role="navigation"
                data-module="track-click"
            >
                <div className="govuk-breadcrumbs ">
                    <ol className="govuk-breadcrumbs__list">
                        {shouldShowServiceName &&
                            renderLinkCrumb(
                                "/",
                                t("common:service-name-breadcrumb")
                            )}

                        {renderMappedRoute(pathname)}

                        {staticTextCrumbLabel &&
                            renderTextCrumb(staticTextCrumbLabel)}
                    </ol>
                </div>
            </nav>
        </>
    );
};

const mapStateToProps = (state) => ({
    currentView: state.currentView,
    appealType: state.appealType,
    searchResultsObj: state.searchResultsObj,
    search: state.search
});

const mapDispatchToProps = (dispatch) => {
    return {
        updateField: (form, field, newValue) =>
            dispatch(change(form, field, newValue)),
        setRepresentationCapacity: (representationCapacity) => {
            dispatch(setRepresentationCapacity(representationCapacity));
        },
        setRepresentationSubmit: (representationSubmit) => {
            dispatch(setRepresentationSubmit(representationSubmit));
        },
        setCurrentView: (currentView) => {
            dispatch(setCurrentView(currentView));
        },
        setCurrentSection: (currentSection) => {
            dispatch(setCurrentSection(currentSection));
        }
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Breadcrumbs);