import { JSONPath as jsonpath } from "jsonpath-plus";
import _ from "lodash";
import useTranslation from "next-translate/useTranslation";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { connect } from "react-redux";
import transLookup from "../../data/lookuptranslations.json";
import Documents from "./documents";
import EventsDetails from "./events";
import MediaDetails from "./media";
import StatusDetails from "./status";

import {
    createWatchedCases,
    deleteWatchedCases,
    getWatchedCasesProxy,
    setCaseInvolvment
} from "../../actions/services/portalService";
import { getLinkedCases } from "../../actions/services/searchService";
import { getPortalModuleDetailsProxy } from "../../actions/services/caseService";
import {
    setCurrentLinkedCases,
    setCurrentReference,
    setCurrentView
} from "../../store/currentView/action";

import {
    setWatchedCases,
    setWatchedCasesDetails
} from "../../store/watchedCases/action";

import { signIn, useSession } from "next-auth/react";
import { destroyCookie, parseCookies, setCookie } from "nookies";
import { getFormCollectionByID, getDetailsProxy, hasOwn } from "../utils";
import {
    getLivePublishedEvent,
    isEventLiveNow
} from "./summary/utils/liveEvent";

import * as CaseTypes from "./summaryTypes"; // ✅ must match filename exactly
import {
    capitalizeFirstLetter,
    formatDates,
    hasValidKey,
    isObjectNotEmpty,
    hasOwnPropertyAndNotNull,
    linkedCasesList,
    getBilingualText
} from "./summary/utils/helpers";
import {
    isConsultationWindowOpen,
    isGeneralRepresentationWindowOpen,
    canShowRepButtonForAppealType,
    getEntryCtaLabelKey,
    shouldSuppressBlockedMessage,
    getGeneralBlockedEndDate,
    isRepresentationPeriodEnded
} from "./summary/utils/representationEntry";
import {
    resolveSearchResultsHref,
    isDnsRoutePath
} from "../../lib/routing/routeState";

import CaseNoticeBanner from "./caseNoticeBanner";
import WatchModal from "./watchmodal";
import EIADetails from "./eia";

import MapComponent from "../mapping";
import OSPoint from "ospoint";

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

    const router = useRouter();
    const { locale } = router;
    const {
        appealTypeID,
        incidentid,
        caseReference,
        myCases,
        myRepresentations,
        watchedCases,
        awaitingSubmission,
        searchResultsObj,
        searchDetailsObj,
        directSearchResultsObj,
        currentType,
        setCurrentLinkedCases,
        linkedCasesReference,
        setCurrentReference,
        setWatchedCases,
        setWatchedCasesDetails,
        showMap,
        currentView,
        messagesObj,
        docsOffline,
        ticketnumber,
        mapTarget
    } = props;

    const showLoginCheck =
        currentType == "directResultsObj" ? "true" : currentView.showLogin;

    //let showLoginCheck = props.showLoginCheck;
    const { data: session, status } = useSession();

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [whichTab, setWhichTab] = useState("case-details");

    const handleOpenModal = () => {
        setIsModalOpen(true);
    };

    const handleCloseModal = () => {
        setIsModalOpen(false);
    };

    const cookies = parseCookies();

    const isLPA =
        props.accountDetails.accountDetails[
            "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
        ] == "LPA"
            ? true
            : false;

    const selectWatchedCase = (loggedInUser, incidentID, appealType) => {
        let updateBody = {
            "pinswg_WatchedCase@odata.bind": "/incidents(" + incidentID + ")",
            "pinswg_Contact@odata.bind": "/contacts(" + loggedInUser + ")",
            "pinswg_appealcasetype": +appealType
        };

        createWatchedCases(updateBody)
            .then((data) => data)
            .then(() => {
                getWatchedCasesProxy(loggedInUser).then((data) => {
                    (setWatchedCases(data),
                        getDetailsProxy(data, "myWatchedCases").then((data) => {
                            setWatchedCasesDetails(data);
                        }));
                });
            });

        //setCaseInvolvment(incidentid, loggedInUser);
    };

    const selectEmailNotifications = (
        emailaddress,
        loggedInUser,
        incidentID,
        appealType
    ) => {
        let updateBody = {
            "pinswg_WatchedCase@odata.bind": "/incidents(" + incidentID + ")",
            "pinswg_Contact@odata.bind": "/contacts(" + loggedInUser + ")",
            "pinswg_appealcasetype": +appealType,
            "pinswg_emailnotifications": true
        };

        console.log("Email signed up");
        createWatchedCases(updateBody)
            .then((data) => data)
            .then(() => {
                getWatchedCasesProxy(props.accountDetails.loggedinUserId).then(
                    (data) => {
                        (setWatchedCases(data),
                            getDetailsProxy(data, "myWatchedCases").then(
                                (data) => {
                                    setWatchedCasesDetails(data);
                                }
                            ));
                    }
                );
            });
    };

    const isWatchedCase = (whichIncident) => {
        let isWatched = jsonpath({
            path:
                "$..value[?(@ && @._pinswg_watchedcase_value=='" +
                whichIncident +
                "')]",
            json: watchedCases,
            eval: true
        });

        return isWatched;
    };

    const isEmailSignUp = (whichIncident) => {
        let isEmail = jsonpath({
            path:
                "$..value[?(@ && @._pinswg_watchedcase_value=='" +
                whichIncident +
                "' && @.pinswg_emailnotifications==true)]",

            json: watchedCases,
            eval: true
        });
        return isEmail;
    };

    const deleteItem = (caseID, topThreeType) => {
        let cookies = parseCookies();
        topThreeType == "watchedCases" &&
            deleteWatchedCases(caseID)
                .then((data) => data)
                .then(() => {
                    getWatchedCasesProxy(cookies.pinsUser).then((data) => {
                        let showWatchedCases = (submittedArr) => {
                            const required = submittedArr.value.filter((el) => {
                                return (
                                    el.pinswg_representationsubmitted == null
                                );
                            });

                            let newObj = {};
                            return Object.assign(newObj, {
                                "@odata.count": required.length,
                                "value": required
                            });
                        };

                        data = showWatchedCases(data);

                        data.value.sort(function compare(a, b) {
                            var dateA = new Date(a.createdon);
                            var dateB = new Date(b.createdon);
                            return dateB - dateA;
                        });
                        (setWatchedCases(data),
                            getDetailsProxy(data, "myWatchedCases").then(
                                (data) => {
                                    setWatchedCasesDetails(data);
                                }
                            ));
                    });
                });
    };

    const noRepresentationLink = ["/dnsdetails", "/dns/[developmentName]"];

    let setCaseQueryObj =
        currentType == "directResultsObj"
            ? props.searchResultsObj
            : props[currentType];
    let setCaseDetailsObj =
        currentType == "directResultsObj"
            ? props.searchDetailsObj
            : props[currentType + "Details"];

    var casesObj = {};

    currentType == "searchResultsObj"
        ? (casesObj = jsonpath({
              path: '$..[?(@ && @.ticketnumber=="' + ticketnumber + '")]',
              json: searchResultsObj,
              eval: true
          }))
        : currentType == "watchedCases"
          ? (casesObj = jsonpath({
                path: '$..[?(@ && @.ticketnumber=="' + ticketnumber + '")]',
                json: setCaseQueryObj,
                eval: true
            }))
          : currentType == "myCases"
            ? (casesObj = jsonpath({
                  path: '$..[?(@ && @.pinswg_title=="' + caseReference + '")]',
                  json: setCaseQueryObj,
                  eval: true
              }))
            : currentType == "directResultsObj"
              ? (casesObj = jsonpath({
                    path: '$..[?(@ && @.ticketnumber=="' + ticketnumber + '")]',
                    json: setCaseQueryObj,
                    eval: true
                }))
              : (casesObj = jsonpath({
                    path: '$..[?(@ && @.reference=="' + caseReference + '")]',
                    json: setCaseQueryObj,
                    eval: true
                }));

    casesObj = Object.assign({}, ...casesObj);

    var detailsObj = {};

    currentType == "searchResultsObj"
        ? (detailsObj = jsonpath({
              path: '$..[?(@ && @.pinswg_name=="' + caseReference + '")]',
              json: searchDetailsObj,
              eval: true
          }))
        : currentType == "directResultsObj"
          ? (detailsObj = setCaseDetailsObj[0].value[0])
          : (detailsObj = jsonpath({
                path: '$..[?(@ && @.pinswg_name=="' + caseReference + '")]',
                jsopn: setCaseDetailsObj,
                eval: true
            }));

    detailsObj = typeof detailsObj == "object" ? detailsObj : detailsObj[0];

    let showDetails = typeof detailsObj != "undefined" ? true : false;

    var timestamp = showDetails
        ? detailsObj.hasOwnProperty("pinswg_representation_period_end_date")
            ? Date.parse(detailsObj.pinswg_representation_period_end_date)
            : "n/a"
        : "n/a";

    if (isNaN(timestamp) == false) {
        var d = new Date(timestamp);
    }

    let hasEndDate = typeof d != "undefined";

    const hasEventsTabData =
        isObjectNotEmpty(props, "eventsObj") &&
        Array.isArray(props.eventsObj?.value) &&
        props.eventsObj.value.length > 0;

    const hasMediaTabData =
        isObjectNotEmpty(props, "mediaObj") &&
        Array.isArray(props.mediaObj?.value) &&
        props.mediaObj.value.length > 0;

    const livePublishedEvent = hasEventsTabData
        ? getLivePublishedEvent(props.eventsObj)
        : null;

    let point = {};
    let siteCoords = {};
    let center = {};

    point = new OSPoint(
        detailsObj.pinswg_anticipatedgridreferencenorthingtext ||
            detailsObj.pinswg_anticipatedgridrefnorthing,
        detailsObj.pinswg_anticipatedgridreferenceeastingtext ||
            detailsObj.pinswg_anticipatedgridrefeasting
    );
    siteCoords = point.toOSGB36();
    //console.log(siteCoords);
    center = {
        id: "",
        lat: isNaN(parseFloat(siteCoords.latitude))
            ? 52.412272
            : parseFloat(siteCoords.latitude),
        lng: isNaN(parseFloat(siteCoords.longitude))
            ? -3.437989
            : parseFloat(siteCoords.longitude)
    };

    const zoom = isNaN(parseFloat(siteCoords.latitude)) ? 7 : 12;

    const isDnsRoute = isDnsRoutePath(router.pathname);

    const searchHref = resolveSearchResultsHref({
        query: router.query,
        hasSession: Boolean(session),
        includeViewAll: true,
        fallbackToMyPortalWhenNoFlags: true,
        isDnsRoute
    });

    let showDetailsBlock =
        showDetails == true ? (
            <>
                <div className="govuk-frontend-supported">
                    {livePublishedEvent && (
                        <div
                            className="govuk-notification-banner govuk-!-margin-bottom-6"
                            role="region"
                            aria-labelledby="live-event-title"
                            data-module="govuk-notification-banner"
                        >
                            <div className="govuk-notification-banner__header">
                                <h2
                                    className="govuk-notification-banner__title"
                                    id="live-event-title"
                                >
                                    {t("case:live-event-subheading")}
                                </h2>
                            </div>
                            <div className="govuk-notification-banner__content">
                                <p className="govuk-notification-banner__heading">
                                    {t("case:live-event-copy")}
                                </p>

                                {livePublishedEvent.pinswg_eventname && (
                                    <p className="govuk-body">
                                        {livePublishedEvent.pinswg_eventname}
                                    </p>
                                )}

                                <a
                                    href={
                                        locale === "en"
                                            ? livePublishedEvent.pinswg_linktotheevent
                                            : livePublishedEvent.pinswg_linktotheeventstreamwelsh
                                    }
                                    className="govuk-link govuk-link--no-visited-state"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
                                    {t("case:live-event-link")}
                                </a>
                            </div>
                        </div>
                    )}
                    <div className="govuk-grid-row">
                        <div className="govuk-grid-column-full">
                            <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
                                {t("case:summary-reference-label")}:{" "}
                                {currentType == "searchResultsObj"
                                    ? detailsObj.pinswg_name
                                    : currentType == "directResultsObj"
                                      ? casesObj.title
                                      : currentType == "watchedCases"
                                        ? casesObj.pinswg_title
                                        : casesObj.reference}
                            </h1>
                        </div>
                    </div>

                    <div className="govuk-tabs" data-module="govuk-tabs">
                        <h2 className="govuk-tabs__title">Contents</h2>
                        <ul className="govuk-tabs__list">
                            <li
                                className={
                                    whichTab == "case-details"
                                        ? "govuk-tabs__list-item govuk-tabs__list-item--selected"
                                        : "govuk-tabs__list-item "
                                }
                            >
                                <a
                                    className="govuk-tabs__tab"
                                    href="#case-details"
                                    onClick={() => setWhichTab("case-details")}
                                >
                                    {t("case:summary-tab-details-label")}
                                </a>
                            </li>
                            <li
                                className={
                                    whichTab == "case-summary"
                                        ? "govuk-tabs__list-item govuk-tabs__list-item--selected"
                                        : "govuk-tabs__list-item "
                                }
                            >
                                <a
                                    className="govuk-tabs__tab"
                                    href="#case-summary"
                                    onClick={() => setWhichTab("case-summary")}
                                >
                                    {t("case:summary-tab-summary-label")}
                                </a>
                            </li>
                            {((hasValidKey(
                                detailsObj,
                                "pinswg_anticipatedgridreferencenorthingtext"
                            ) &&
                                hasValidKey(
                                    detailsObj,
                                    "pinswg_anticipatedgridreferenceeastingtext"
                                )) ||
                                (hasValidKey(
                                    detailsObj,
                                    "pinswg_anticipatedgridrefeasting"
                                ) &&
                                    hasValidKey(
                                        detailsObj,
                                        "pinswg_anticipatedgridrefnorthing"
                                    ))) && (
                                <li
                                    className={
                                        whichTab == "case-map"
                                            ? "govuk-tabs__list-item govuk-tabs__list-item--selected"
                                            : "govuk-tabs__list-item "
                                    }
                                >
                                    <a
                                        className="govuk-tabs__tab"
                                        href="#case-map"
                                        onClick={() => setWhichTab("case-map")}
                                    >
                                        {t("case:summary-tab-map-label")}
                                    </a>
                                </li>
                            )}

                            {getFormCollectionByID(appealTypeID)
                                .PrimaryIdAttribute == "pinswg_sipscase" && (
                                <li
                                    className={
                                        whichTab == "case-eia"
                                            ? "govuk-tabs__list-item govuk-tabs__list-item--selected"
                                            : "govuk-tabs__list-item "
                                    }
                                >
                                    <a
                                        className="govuk-tabs__tab"
                                        href="#case-eia"
                                        onClick={() => setWhichTab("case-eia")}
                                    >
                                        {" "}
                                        EIA
                                    </a>
                                </li>
                            )}
                            {hasEventsTabData && (
                                <li
                                    className={
                                        whichTab == "case-events"
                                            ? "govuk-tabs__list-item govuk-tabs__list-item--selected"
                                            : "govuk-tabs__list-item "
                                    }
                                >
                                    <a
                                        className="govuk-tabs__tab"
                                        href="#case-events"
                                        onClick={() =>
                                            setWhichTab("case-events")
                                        }
                                    >
                                        {" "}
                                        {t("case:summary-tab-events-label")}
                                    </a>
                                </li>
                            )}
                            {hasMediaTabData && (
                                <li
                                    className={
                                        whichTab == "case-media"
                                            ? "govuk-tabs__list-item govuk-tabs__list-item--selected"
                                            : "govuk-tabs__list-item "
                                    }
                                >
                                    <a
                                        className="govuk-tabs__tab"
                                        href="#case-media"
                                        onClick={() =>
                                            setWhichTab("case-media")
                                        }
                                    >
                                        {" "}
                                        {t("case:summary-tab-media-label")}{" "}
                                    </a>
                                </li>
                            )}
                            <li
                                className={
                                    whichTab == "case-documents"
                                        ? "govuk-tabs__list-item govuk-tabs__list-item--selected"
                                        : "govuk-tabs__list-item "
                                }
                            >
                                <a
                                    className="govuk-tabs__tab"
                                    href="#case-documents"
                                    onClick={() =>
                                        setWhichTab("case-documents")
                                    }
                                >
                                    {t("case:summary-tab-documents-label")}
                                </a>
                            </li>
                            <li
                                className={
                                    whichTab == "case-status"
                                        ? "govuk-tabs__list-item govuk-tabs__list-item--selected"
                                        : "govuk-tabs__list-item "
                                }
                            >
                                <a
                                    className="govuk-tabs__tab"
                                    href="#case-status"
                                    onClick={() => setWhichTab("case-status")}
                                >
                                    {t("case:status-title")}
                                </a>
                            </li>
                        </ul>
                        <div
                            className={
                                whichTab == "case-details"
                                    ? "govuk-tabs__panel "
                                    : "govuk-tabs__panel govuk-tabs__panel--hidden"
                            }
                            id="case-details"
                        >
                            <div className="govuk-grid-row">
                                <div className="govuk-grid-column-full">
                                    {/* <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
                                    </h1> */}
                                    {props.messagesObj["@odata.count"] > 0 && (
                                        <CaseNoticeBanner
                                            messagesObj={props.messagesObj}
                                        />
                                    )}
                                    <dl className="govuk-summary-list govuk-!-margin-bottom-9">
                                        <div className="govuk-summary-list__row">
                                            <dt className="govuk-summary-list__key">
                                                {getFormCollectionByID(
                                                    appealTypeID ||
                                                        setCaseQueryObj.value[0]
                                                            .pinswg_appealcasetype
                                                ).PrimaryIdAttribute ==
                                                "pinswg_dnsid"
                                                    ? t(
                                                          "case:summary-applicantonly-label"
                                                      )
                                                    : getFormCollectionByID(
                                                            appealTypeID ||
                                                                setCaseQueryObj
                                                                    .value[0]
                                                                    .pinswg_appealcasetype
                                                        ).PrimaryIdAttribute ==
                                                        "pinswg_nonvalidationid"
                                                      ? t(
                                                            "case:summary-appellantonly-label"
                                                        )
                                                      : t(
                                                            "case:summary-applicant-label"
                                                        )}
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {casesObj.pinswg_appellantagent ==
                                                846040001
                                                    ? casesObj.pinswg_appellantfirstname +
                                                      " " +
                                                      casesObj.pinswg_appellantlastname
                                                    : detailsObj[
                                                          "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
                                                      ] || "not entered"}
                                            </dd>
                                        </div>
                                        {detailsObj.pinswg_agentcontactname !=
                                            null &&
                                            (hasOwn(
                                                detailsObj,
                                                "pinswg_agentcontactname"
                                            ) ? (
                                                <div className="govuk-summary-list__row">
                                                    <dt className="govuk-summary-list__key">
                                                        {t(
                                                            "case:summary-agent-label"
                                                        )}
                                                    </dt>
                                                    <dd className="govuk-summary-list__value">
                                                        {hasOwn(
                                                            detailsObj,
                                                            "pinswg_agentcontactname"
                                                        )
                                                            ? detailsObj.pinswg_agentcontactname
                                                            : ""}
                                                    </dd>
                                                </div>
                                            ) : (
                                                ""
                                            ))}
                                        <div className="govuk-summary-list__row">
                                            <dt className="govuk-summary-list__key">
                                                {t(
                                                    "case:summary-site-address-label"
                                                )}
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {getFormCollectionByID(
                                                    appealTypeID ||
                                                        setCaseQueryObj.value[0]
                                                            .pinswg_appealcasetype
                                                ).PrimaryIdAttribute ==
                                                    "pinswg_dnsid" ||
                                                getFormCollectionByID(
                                                    appealTypeID
                                                ).PrimaryIdAttribute ==
                                                    "pinswg_sipscase"
                                                    ? detailsObj.pinswg_projectlocation !=
                                                      null
                                                        ? detailsObj.pinswg_projectlocation.indexOf(
                                                              ";"
                                                          ) < 0
                                                            ? detailsObj.pinswg_projectlocation
                                                            : router.locale ==
                                                                "cy"
                                                              ? detailsObj.pinswg_projectlocation.split(
                                                                    ";"
                                                                )[1]
                                                              : detailsObj.pinswg_projectlocation.split(
                                                                    ";"
                                                                )[0]
                                                        : ""
                                                    : ""}
                                                {hasOwn(
                                                    detailsObj,
                                                    "pinswg_siteaddressline1"
                                                )
                                                    ? detailsObj.pinswg_siteaddressline1
                                                    : ""}
                                                {hasOwn(
                                                    detailsObj,
                                                    "pinswg_addressline1"
                                                )
                                                    ? detailsObj.pinswg_addressline1
                                                    : ""}
                                                {hasOwn(
                                                    detailsObj,
                                                    "pinswg_siteaddressline1"
                                                ) &&
                                                    detailsObj.pinswg_siteaddressline1 !=
                                                        null && <br />}
                                                {hasOwn(
                                                    detailsObj,
                                                    "pinswg_addressline1"
                                                ) &&
                                                    detailsObj.pinswg_addressline1 !=
                                                        null && <br />}
                                                {hasOwn(
                                                    detailsObj,
                                                    "pinswg_siteaddressline2"
                                                )
                                                    ? detailsObj.pinswg_siteaddressline2
                                                    : ""}
                                                {hasOwn(
                                                    detailsObj,
                                                    "pinswg_addressline2"
                                                )
                                                    ? detailsObj.pinswg_addressline2
                                                    : ""}
                                                {hasOwn(
                                                    detailsObj,
                                                    "pinswg_addressline2"
                                                ) &&
                                                    detailsObj.pinswg_addressline2 !=
                                                        null && <br />}
                                                {hasOwn(
                                                    detailsObj,
                                                    "pinswg_siteaddresstown"
                                                )
                                                    ? detailsObj.pinswg_siteaddresstown
                                                    : ""}
                                                {hasOwn(
                                                    detailsObj,
                                                    "pinswg_addresstown"
                                                )
                                                    ? detailsObj.pinswg_addresstown
                                                    : ""}
                                                {hasOwn(
                                                    detailsObj,
                                                    "pinswg_siteaddresstown"
                                                ) &&
                                                    detailsObj.pinswg_siteaddresstown !=
                                                        null && <br />}
                                                {hasOwn(
                                                    detailsObj,
                                                    "pinswg_addresstown"
                                                ) &&
                                                    detailsObj.pinswg_addresstown !=
                                                        null && <br />}
                                                {hasOwn(
                                                    detailsObj,
                                                    "pinswg_siteaddresscounty"
                                                )
                                                    ? detailsObj.pinswg_siteaddresscounty
                                                    : ""}
                                                {hasOwn(
                                                    detailsObj,
                                                    "pinswg_addresscounty"
                                                )
                                                    ? detailsObj.pinswg_addresscounty
                                                    : ""}
                                                {hasOwn(
                                                    detailsObj,
                                                    "pinswg_siteaddresscounty"
                                                ) &&
                                                    detailsObj.pinswg_siteaddresscounty !=
                                                        null && <br />}
                                                {hasOwn(
                                                    detailsObj,
                                                    "pinswg_addresscounty"
                                                ) &&
                                                    detailsObj.pinswg_addresscounty !=
                                                        null && <br />}
                                                {hasOwn(
                                                    detailsObj,
                                                    "pinswg_siteaddresspostcode"
                                                )
                                                    ? detailsObj.pinswg_siteaddresspostcode
                                                    : ""}
                                                {hasOwn(
                                                    detailsObj,
                                                    "pinswg_postcode"
                                                )
                                                    ? detailsObj.pinswg_postcode
                                                    : ""}
                                            </dd>
                                        </div>
                                        {casesObj.description != null && (
                                            <div className="govuk-summary-list__row">
                                                <dt className="govuk-summary-list__key">
                                                    {t(
                                                        "case:summary-description-label"
                                                    )}
                                                </dt>
                                                <dd className="govuk-summary-list__value">
                                                    {getBilingualText(
                                                        casesObj.description,
                                                        router.locale
                                                    )}
                                                </dd>
                                            </div>
                                        )}
                                        {detailsObj.pinswg_casestage !=
                                            null && (
                                            <div className="govuk-summary-list__row">
                                                <dt className="govuk-summary-list__key">
                                                    {t(
                                                        "case:summary-case-stage-label"
                                                    )}
                                                </dt>
                                                <dd className="govuk-summary-list__value">
                                                    {router.locale == "cy"
                                                        ? jsonpath({
                                                              path:
                                                                  '$..[?(@.value=="' +
                                                                  detailsObj[
                                                                      "pinswg_casestage@OData.Community.Display.V1.FormattedValue"
                                                                  ] +
                                                                  '")].value_cy',
                                                              json: transLookup,
                                                              eval: true
                                                          })
                                                        : detailsObj[
                                                              "pinswg_casestage@OData.Community.Display.V1.FormattedValue"
                                                          ] ||
                                                          t(
                                                              "case:summary-no-date-entered-label"
                                                          )}
                                                </dd>
                                            </div>
                                        )}

                                        {casesObj.pinswg_environmentalstatementlocation !=
                                            null && (
                                            <div className="govuk-summary-list__row">
                                                <dt className="govuk-summary-list__key">
                                                    {t(
                                                        "case:summary-environmental-statement-label"
                                                    )}
                                                </dt>
                                                <dd className="govuk-summary-list__value">
                                                    {
                                                        casesObj.pinswg_environmentalstatementlocation
                                                    }
                                                </dd>
                                            </div>
                                        )}

                                        <div className="govuk-summary-list__row">
                                            <dt className="govuk-summary-list__key">
                                                {t(
                                                    "case:summary-last-modified-label"
                                                )}
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {detailsObj.modifiedon >
                                                casesObj.modifiedon
                                                    ? formatDates(
                                                          detailsObj.modifiedon
                                                      )
                                                    : formatDates(
                                                          casesObj.modifiedon
                                                      )}
                                            </dd>
                                        </div>
                                    </dl>
                                </div>
                            </div>

                            {showLoginCheck == "true" && (
                                <>
                                    <div className="govuk-grid-row">
                                        <div className="govuk-grid-column-full">
                                            <div className="">
                                                <div className="govuk-button-group">
                                                    {getFormCollectionByID(
                                                        appealTypeID
                                                    ).PrimaryIdAttribute ==
                                                        "pinswg_sipscase" &&
                                                        isConsultationWindowOpen(
                                                            detailsObj
                                                        ) && (
                                                            <>
                                                                {canShowRepButtonForAppealType(
                                                                    {
                                                                        "appealType":
                                                                            props
                                                                                .currentView
                                                                                .caseReference
                                                                                .appealType,
                                                                        "isLPA":
                                                                            isLPA,
                                                                        "searchDetailsObj":
                                                                            props.searchDetailsObj
                                                                    }
                                                                ) ? (
                                                                    <>
                                                                        <Link
                                                                            href={{
                                                                                pathname:
                                                                                    "/myportal/representation",
                                                                                query: {
                                                                                    case:
                                                                                        currentType ==
                                                                                        "searchResultsObj"
                                                                                            ? detailsObj.pinswg_name
                                                                                            : currentType ==
                                                                                                "watchedCases"
                                                                                              ? casesObj.pinswg_title
                                                                                              : currentType ==
                                                                                                  "directResultsObj"
                                                                                                ? detailsObj.ticketnumber
                                                                                                : casesObj.reference
                                                                                }
                                                                            }}
                                                                            className="govuk-button"
                                                                        >
                                                                            {t(
                                                                                getEntryCtaLabelKey(
                                                                                    props
                                                                                        .currentView
                                                                                        .caseReference
                                                                                        .appealType
                                                                                )
                                                                            )}
                                                                        </Link>
                                                                    </>
                                                                ) : shouldSuppressBlockedMessage(
                                                                      {
                                                                          "appealType":
                                                                              props
                                                                                  .currentView
                                                                                  .caseReference
                                                                                  .appealType,
                                                                          "isLPA":
                                                                              isLPA
                                                                      }
                                                                  ) ? (
                                                                    ""
                                                                ) : (
                                                                    <>
                                                                        <div className="govuk-grid-column-full govuk-!-padding-left-0">
                                                                            <div className="govuk-button-group">
                                                                                <p className="govuk-body">
                                                                                    {t(
                                                                                        "case:representation-date-passed-label",
                                                                                        {
                                                                                            startDate:
                                                                                                formatDates(
                                                                                                    detailsObj.pinswg_consultationopen
                                                                                                ),
                                                                                            endDate:
                                                                                                formatDates(
                                                                                                    detailsObj.pinswg_consultationclose
                                                                                                )
                                                                                        }
                                                                                    )}
                                                                                    <br />{" "}
                                                                                    {t(
                                                                                        "case:representation-date-passed-additional-label"
                                                                                    )}{" "}
                                                                                    <Link
                                                                                        href={
                                                                                            "mailto:" +
                                                                                            t(
                                                                                                "home:login-contact-email"
                                                                                            )
                                                                                        }
                                                                                    >
                                                                                        {t(
                                                                                            "home:login-contact-email"
                                                                                        )}
                                                                                    </Link>
                                                                                </p>
                                                                            </div>
                                                                        </div>
                                                                    </>
                                                                )}
                                                            </>
                                                        )}
                                                    {isGeneralRepresentationWindowOpen(
                                                        detailsObj
                                                    ) && (
                                                        <>
                                                            {canShowRepButtonForAppealType(
                                                                {
                                                                    "appealType":
                                                                        props
                                                                            .currentView
                                                                            .caseReference
                                                                            .appealType,
                                                                    "isLPA":
                                                                        isLPA,
                                                                    "searchDetailsObj":
                                                                        props.searchDetailsObj
                                                                }
                                                            ) ? (
                                                                <>
                                                                    <Link
                                                                        href={{
                                                                            pathname:
                                                                                "/myportal/representation",
                                                                            query: {
                                                                                case:
                                                                                    currentType ==
                                                                                    "searchResultsObj"
                                                                                        ? detailsObj.ticketnumber
                                                                                        : currentType ==
                                                                                            "watchedCases"
                                                                                          ? casesObj.pinswg_title
                                                                                          : currentType ==
                                                                                              "directResultsObj"
                                                                                            ? detailsObj.ticketnumber
                                                                                            : casesObj.reference
                                                                            }
                                                                        }}
                                                                        className="govuk-button"
                                                                    >
                                                                        {t(
                                                                            "case:summary-make-representation-label"
                                                                        )}
                                                                    </Link>
                                                                </>
                                                            ) : shouldSuppressBlockedMessage(
                                                                  {
                                                                      "appealType":
                                                                          props
                                                                              .currentView
                                                                              .caseReference
                                                                              .appealType,
                                                                      "isLPA":
                                                                          isLPA
                                                                  }
                                                              ) ? (
                                                                ""
                                                            ) : (
                                                                <>
                                                                    <div className="govuk-grid-column-full govuk-!-padding-left-0">
                                                                        <div className="govuk-button-group">
                                                                            <p className="govuk-body">
                                                                                {t(
                                                                                    "case:representation-date-passed-label",
                                                                                    {
                                                                                        startDate:
                                                                                            formatDates(
                                                                                                detailsObj.pinswg_startdate
                                                                                            ),
                                                                                        endDate:
                                                                                            props
                                                                                                .currentView
                                                                                                .caseReference
                                                                                                .appealType ==
                                                                                            846040019
                                                                                                ? formatDates(
                                                                                                      getGeneralBlockedEndDate(
                                                                                                          detailsObj,
                                                                                                          props
                                                                                                              .currentView
                                                                                                              .caseReference
                                                                                                              .appealType
                                                                                                      )
                                                                                                  )
                                                                                                : formatDates(
                                                                                                      getGeneralBlockedEndDate(
                                                                                                          detailsObj,
                                                                                                          props
                                                                                                              .currentView
                                                                                                              .caseReference
                                                                                                              .appealType
                                                                                                      )
                                                                                                  )
                                                                                    }
                                                                                )}
                                                                                <br />{" "}
                                                                                {t(
                                                                                    "case:representation-date-passed-additional-label"
                                                                                )}{" "}
                                                                                <Link
                                                                                    href={
                                                                                        "mailto:" +
                                                                                        t(
                                                                                            "home:login-contact-email"
                                                                                        )
                                                                                    }
                                                                                >
                                                                                    {t(
                                                                                        "home:login-contact-email"
                                                                                    )}
                                                                                </Link>
                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </>
                                                            )}
                                                        </>
                                                    )}

                                                    <Link
                                                        className="govuk-button govuk-button--secondary"
                                                        href={searchHref}
                                                    >
                                                        {" "}
                                                        {t(
                                                            "case:summary-back-button-label"
                                                        )}
                                                    </Link>
                                                </div>
                                                <div className="govuk-button-group">
                                                    {session &&
                                                        (isWatchedCase(
                                                            props.currentView
                                                                .caseReference
                                                                .incidentid
                                                        ).length >
                                                            0 ==
                                                        true ? (
                                                            <button
                                                                className="govuk-link watchCase"
                                                                onClick={() => {
                                                                    (confirm(
                                                                        t(
                                                                            "case:you-have-stopped-watching-label"
                                                                        ) +
                                                                            props
                                                                                .currentView
                                                                                .caseReference
                                                                                .currentReference +
                                                                            "?"
                                                                    ) &&
                                                                        deleteItem(
                                                                            isWatchedCase(
                                                                                props
                                                                                    .currentView
                                                                                    .caseReference
                                                                                    .incidentid
                                                                            )[0]
                                                                                .pinswg_watchlistid,

                                                                            "watchedCases"
                                                                        ),
                                                                        setCurrentView(
                                                                            {
                                                                                "viewName":
                                                                                    "Watched Cases",
                                                                                "viewKey":
                                                                                    "watchedCases"
                                                                            }
                                                                        ));
                                                                    setCurrentReference(
                                                                        {
                                                                            "ticketnumber":
                                                                                props
                                                                                    .currentView
                                                                                    .caseReference
                                                                                    .currentReference,
                                                                            "currentReference":
                                                                                props
                                                                                    .currentView
                                                                                    .caseReference
                                                                                    .currentReference,
                                                                            "currentType":
                                                                                "searchResultsObj",
                                                                            "incidentid":
                                                                                props
                                                                                    .currentView
                                                                                    .caseReference
                                                                                    .incidentid,
                                                                            "appealType":
                                                                                props
                                                                                    .currentView
                                                                                    .caseReference
                                                                                    .appealType,
                                                                            "showMap":
                                                                                showMap
                                                                        }
                                                                    );
                                                                }}
                                                                title={t(
                                                                    "case:stop-watching-case-link"
                                                                )}
                                                            >
                                                                {t(
                                                                    "case:stop-watching-case-link"
                                                                )}{" "}
                                                            </button>
                                                        ) : (
                                                            <>
                                                                <button
                                                                    className="govuk-link watchCase"
                                                                    onClick={() => {
                                                                        confirm(
                                                                            t(
                                                                                "case:you-are-watching-label"
                                                                            ) +
                                                                                " " +
                                                                                props
                                                                                    .currentView
                                                                                    .caseReference
                                                                                    .currentReference +
                                                                                "?"
                                                                        ) &&
                                                                            selectWatchedCase(
                                                                                props
                                                                                    .accountDetails
                                                                                    .loggedinUserId,
                                                                                props
                                                                                    .currentView
                                                                                    .caseReference
                                                                                    .incidentid,
                                                                                props
                                                                                    .currentView
                                                                                    .caseReference
                                                                                    .appealType
                                                                            );
                                                                    }}
                                                                >
                                                                    {t(
                                                                        "case:watch-this-case-link"
                                                                    )}
                                                                </button>
                                                            </>
                                                        ))}
                                                    {session &&
                                                        (isEmailSignUp(
                                                            props.currentView
                                                                .caseReference
                                                                .incidentid
                                                        ).length >
                                                            0 ==
                                                        true ? (
                                                            <button
                                                                className="govuk-link watchCase"
                                                                onClick={() => {
                                                                    (confirm(
                                                                        t(
                                                                            "case:summary-unsubscribe-mail-label"
                                                                        ) +
                                                                            props
                                                                                .currentView
                                                                                .caseReference
                                                                                .currentReference +
                                                                            "?"
                                                                    ) &&
                                                                        deleteItem(
                                                                            isEmailSignUp(
                                                                                props
                                                                                    .currentView
                                                                                    .caseReference
                                                                                    .incidentid
                                                                            )[0]
                                                                                .pinswg_watchlistid,

                                                                            "watchedCases"
                                                                        ),
                                                                        setCurrentView(
                                                                            {
                                                                                "viewName":
                                                                                    "Watched Cases",
                                                                                "viewKey":
                                                                                    "watchedCases"
                                                                            }
                                                                        ));
                                                                    setCurrentReference(
                                                                        {
                                                                            "ticketnumber":
                                                                                props
                                                                                    .currentView
                                                                                    .caseReference
                                                                                    .currentReference,
                                                                            "currentReference":
                                                                                props
                                                                                    .currentView
                                                                                    .caseReference
                                                                                    .currentReference,
                                                                            "currentType":
                                                                                "searchResultsObj",
                                                                            "incidentid":
                                                                                props
                                                                                    .currentView
                                                                                    .caseReference
                                                                                    .incidentid,
                                                                            "appealType":
                                                                                props
                                                                                    .currentView
                                                                                    .caseReference
                                                                                    .appealType,
                                                                            "showMap":
                                                                                showMap
                                                                        }
                                                                    );
                                                                }}
                                                                title={t(
                                                                    "case:stop-sending-email-notifications"
                                                                )}
                                                            >
                                                                {t(
                                                                    "case:stop-sending-email-notifications"
                                                                )}{" "}
                                                            </button>
                                                        ) : (
                                                            <>
                                                                <button
                                                                    className="govuk-link watchCase"
                                                                    onClick={() => {
                                                                        confirm(
                                                                            t(
                                                                                "case:summary-subscribe-mail-label"
                                                                            ) +
                                                                                " " +
                                                                                props
                                                                                    .currentView
                                                                                    .caseReference
                                                                                    .currentReference +
                                                                                "?"
                                                                        ) &&
                                                                            selectEmailNotifications(
                                                                                props
                                                                                    .accountDetails
                                                                                    .accountDetails
                                                                                    .emailaddress1,
                                                                                props
                                                                                    .accountDetails
                                                                                    .loggedinUserId,
                                                                                props
                                                                                    .currentView
                                                                                    .caseReference
                                                                                    .incidentid,
                                                                                props
                                                                                    .currentView
                                                                                    .caseReference
                                                                                    .appealType
                                                                            );
                                                                    }}
                                                                >
                                                                    {t(
                                                                        "case:send-email-notifications"
                                                                    )}
                                                                </button>
                                                            </>
                                                        ))}
                                                    {!session && (
                                                        <>
                                                            <button
                                                                className="govuk-link watchCase"
                                                                onClick={() => {
                                                                    (confirm(
                                                                        "Trying to watch case " +
                                                                            props
                                                                                .currentView
                                                                                .caseReference
                                                                                .currentReference +
                                                                            "\n\nYou will now be prompted to sign in"
                                                                    ) &&
                                                                        // signIn("email", {
                                                                        //     callbackUrl:
                                                                        //         "/myportal/case/" +
                                                                        //         props
                                                                        //             .currentView
                                                                        //             .caseReference
                                                                        //             .ticketnumber,
                                                                        // });

                                                                        setCookie(
                                                                            null,
                                                                            "pedwWatchCase",
                                                                            currentType ==
                                                                                "searchResultsObj"
                                                                                ? detailsObj.pinswg_name
                                                                                : currentType ==
                                                                                    "directResultsObj"
                                                                                  ? casesObj.title
                                                                                  : casesObj.reference,
                                                                            {
                                                                                path: "/",
                                                                                expires:
                                                                                    expDate
                                                                            }
                                                                        ),
                                                                        signIn());
                                                                }}
                                                                title={t(
                                                                    "case:watch-this-case-link"
                                                                )}
                                                            >
                                                                {t(
                                                                    "case:watch-this-case-link"
                                                                )}
                                                            </button>{" "}
                                                            <button
                                                                className="govuk-link watchCase"
                                                                onClick={() => {
                                                                    (confirm(
                                                                        t(
                                                                            "case:summary-subscribe-mail-label"
                                                                        ) +
                                                                            " " +
                                                                            props
                                                                                .currentView
                                                                                .caseReference
                                                                                .currentReference +
                                                                            "?"
                                                                    ) &&
                                                                        setCookie(
                                                                            null,
                                                                            "pedwWatchCase",
                                                                            currentType ==
                                                                                "searchResultsObj"
                                                                                ? detailsObj.pinswg_name
                                                                                : currentType ==
                                                                                    "directResultsObj"
                                                                                  ? casesObj.title
                                                                                  : casesObj.reference,
                                                                            {
                                                                                path: "/",
                                                                                expires:
                                                                                    expDate
                                                                            }
                                                                        ),
                                                                        signIn());
                                                                }}
                                                            >
                                                                {t(
                                                                    "case:send-email-notifications"
                                                                )}
                                                            </button>
                                                        </>
                                                    )}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="govuk-grid-row">
                                        <div className="govuk-grid-column-full">
                                            {hasOwn(
                                                detailsObj,
                                                "pinswg_startdate"
                                            ) &&
                                                (detailsObj.pinswg_startdate !=
                                                    null ||
                                                    detailsObj.pinswg_finalcommentsduedate !=
                                                        null) &&
                                                isRepresentationPeriodEnded(
                                                    detailsObj
                                                ) && (
                                                    <div className="govuk-body">
                                                        {props.currentView
                                                            .caseReference
                                                            .appealType ==
                                                        84604002
                                                            ? t(
                                                                  "case:consultation-period-ended-on-label"
                                                              )
                                                            : t(
                                                                  "case:representation-period-ended-on-label"
                                                              )}

                                                        {props.currentView
                                                            .caseReference
                                                            .appealType ==
                                                        846040019
                                                            ? formatDates(
                                                                  detailsObj.pinswg_statementduedate
                                                              )
                                                            : formatDates(
                                                                  detailsObj.pinswg_finalcommentsduedate
                                                              )}
                                                    </div>
                                                )}
                                        </div>
                                    </div>
                                </>
                            )}
                        </div>
                        <div
                            className={
                                whichTab == "case-summary"
                                    ? "govuk-tabs__panel "
                                    : "govuk-tabs__panel govuk-tabs__panel--hidden"
                            }
                            id="case-summary"
                        >
                            {showSummary(
                                appealTypeID,
                                casesObj,
                                detailsObj,
                                formatDates,
                                linkedCasesList,
                                currentView,
                                showMap
                            )}
                        </div>

                        {((hasValidKey(
                            detailsObj,
                            "pinswg_anticipatedgridreferencenorthingtext"
                        ) &&
                            hasValidKey(
                                detailsObj,
                                "pinswg_anticipatedgridreferenceeastingtext"
                            )) ||
                            (hasValidKey(
                                detailsObj,
                                "pinswg_anticipatedgridrefeasting"
                            ) &&
                                hasValidKey(
                                    detailsObj,
                                    "pinswg_anticipatedgridrefnorthing"
                                ))) && (
                            <div
                                className={
                                    whichTab == "case-map"
                                        ? "govuk-tabs__panel "
                                        : "govuk-tabs__panel govuk-tabs__panel--hidden"
                                }
                                id="case-map"
                            >
                                <div className="govuk-grid-row">
                                    <div
                                        style={{
                                            height: "40vh",
                                            width: "100%"
                                        }}
                                    >
                                        <MapComponent
                                            center={center}
                                            zoom={zoom}
                                            locale={router.locale}
                                            mapTarget={mapTarget}
                                        />
                                        {/* <OSMapComponent center={center} zoom={zoom} /> */}
                                    </div>
                                </div>
                                <div className="govuk-grid-row">
                                    <div className="govuk-grid-column-full">
                                        <dl className="govuk-summary-list govuk-!-margin-bottom-9">
                                            <div className="govuk-summary-list__row">
                                                <dt className="govuk-summary-list__key">
                                                    {t(
                                                        "case:summary-site-address-label"
                                                    )}
                                                </dt>
                                                <dd className="govuk-summary-list__value">
                                                    {getFormCollectionByID(
                                                        appealTypeID
                                                    ).PrimaryIdAttribute ==
                                                        "pinswg_dnsid" ||
                                                    getFormCollectionByID(
                                                        appealTypeID
                                                    ).PrimaryIdAttribute ==
                                                        "pinswg_sipscase"
                                                        ? detailsObj.pinswg_projectlocation !=
                                                          null
                                                            ? detailsObj.pinswg_projectlocation.indexOf(
                                                                  ";"
                                                              ) < 0
                                                                ? detailsObj.pinswg_projectlocation
                                                                : router.locale ==
                                                                    "cy"
                                                                  ? detailsObj.pinswg_projectlocation.split(
                                                                        ";"
                                                                    )[1]
                                                                  : detailsObj.pinswg_projectlocation.split(
                                                                        ";"
                                                                    )[0]
                                                            : ""
                                                        : ""}
                                                    {hasOwn(
                                                        detailsObj,
                                                        "pinswg_siteaddressline1"
                                                    )
                                                        ? detailsObj.pinswg_siteaddressline1
                                                        : ""}
                                                    {hasOwn(
                                                        detailsObj,
                                                        "pinswg_addressline1"
                                                    )
                                                        ? detailsObj.pinswg_addressline1
                                                        : ""}
                                                    {hasOwn(
                                                        detailsObj,
                                                        "pinswg_siteaddressline1"
                                                    ) &&
                                                        detailsObj.pinswg_siteaddressline1 !=
                                                            null && <br />}
                                                    {hasOwn(
                                                        detailsObj,
                                                        "pinswg_addressline1"
                                                    ) &&
                                                        detailsObj.pinswg_addressline1 !=
                                                            null && <br />}
                                                    {hasOwn(
                                                        detailsObj,
                                                        "pinswg_siteaddressline2"
                                                    )
                                                        ? detailsObj.pinswg_siteaddressline2
                                                        : ""}
                                                    {hasOwn(
                                                        detailsObj,
                                                        "pinswg_addressline2"
                                                    )
                                                        ? detailsObj.pinswg_addressline2
                                                        : ""}
                                                    {hasOwn(
                                                        detailsObj,
                                                        "pinswg_addressline2"
                                                    ) &&
                                                        detailsObj.pinswg_addressline2 !=
                                                            null && <br />}
                                                    {hasOwn(
                                                        detailsObj,
                                                        "pinswg_siteaddresstown"
                                                    )
                                                        ? detailsObj.pinswg_siteaddresstown
                                                        : ""}
                                                    {hasOwn(
                                                        detailsObj,
                                                        "pinswg_addresstown"
                                                    )
                                                        ? detailsObj.pinswg_addresstown
                                                        : ""}
                                                    {hasOwn(
                                                        detailsObj,
                                                        "pinswg_siteaddresstown"
                                                    ) &&
                                                        detailsObj.pinswg_siteaddresstown !=
                                                            null && <br />}
                                                    {hasOwn(
                                                        detailsObj,
                                                        "pinswg_addresstown"
                                                    ) &&
                                                        detailsObj.pinswg_addresstown !=
                                                            null && <br />}
                                                    {hasOwn(
                                                        detailsObj,
                                                        "pinswg_siteaddresscounty"
                                                    )
                                                        ? detailsObj.pinswg_siteaddresscounty
                                                        : ""}
                                                    {hasOwn(
                                                        detailsObj,
                                                        "pinswg_addresscounty"
                                                    )
                                                        ? detailsObj.pinswg_addresscounty
                                                        : ""}
                                                    {hasOwn(
                                                        detailsObj,
                                                        "pinswg_siteaddresscounty"
                                                    ) &&
                                                        detailsObj.pinswg_siteaddresscounty !=
                                                            null && <br />}
                                                    {hasOwn(
                                                        detailsObj,
                                                        "pinswg_addresscounty"
                                                    ) &&
                                                        detailsObj.pinswg_addresscounty !=
                                                            null && <br />}
                                                    {hasOwn(
                                                        detailsObj,
                                                        "pinswg_siteaddresspostcode"
                                                    )
                                                        ? detailsObj.pinswg_siteaddresspostcode
                                                        : ""}
                                                    {hasOwn(
                                                        detailsObj,
                                                        "pinswg_postcode"
                                                    )
                                                        ? detailsObj.pinswg_postcode
                                                        : ""}
                                                </dd>
                                            </div>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                        )}

                        <div
                            className={
                                whichTab == "case-eia"
                                    ? "govuk-tabs__panel "
                                    : "govuk-tabs__panel govuk-tabs__panel--hidden"
                            }
                            id="case-eia"
                        >
                            <div className="govuk-grid-row">
                                <div className="flex-container grid-row govuk-body case">
                                    <div className="card" id="key-dates-card">
                                        <div className="card-body">
                                            <div>
                                                <h4 className="govuk-heading-s ">
                                                    {t(
                                                        "case:summary-eia-screening-heading"
                                                    )}
                                                </h4>

                                                <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
                                                    <div className="govuk-summary-list__row">
                                                        <dt className="govuk-summary-list__key">
                                                            {t(
                                                                "case:summary-eia-screening-start-date-label"
                                                            )}
                                                        </dt>{" "}
                                                        <dd className="govuk-summary-list__value">
                                                            {hasOwn(
                                                                detailsObj,
                                                                "pinswg_screeningstartdate"
                                                            )
                                                                ? !_.isEmpty(
                                                                      detailsObj.pinswg_screeningstartdate
                                                                  )
                                                                    ? formatDates(
                                                                          detailsObj.pinswg_screeningstartdate
                                                                      )
                                                                    : t(
                                                                          "case:summary-awaiting-information-label"
                                                                      )
                                                                : t(
                                                                      "case:summary-awaiting-information-label"
                                                                  )}
                                                        </dd>
                                                    </div>
                                                    <div className="govuk-summary-list__row">
                                                        <dt className="govuk-summary-list__key">
                                                            {t(
                                                                "case:summary-eia-screening-target-date-label"
                                                            )}
                                                        </dt>{" "}
                                                        <dd className="govuk-summary-list__value">
                                                            {hasOwn(
                                                                detailsObj,
                                                                "pinswg_eiatargetdate"
                                                            )
                                                                ? !_.isEmpty(
                                                                      detailsObj.pinswg_eiatargetdate
                                                                  )
                                                                    ? formatDates(
                                                                          detailsObj.pinswg_eiatargetdate
                                                                      )
                                                                    : t(
                                                                          "case:summary-awaiting-information-label"
                                                                      )
                                                                : t(
                                                                      "case:summary-awaiting-information-label"
                                                                  )}
                                                        </dd>
                                                    </div>

                                                    {hasValidKey(
                                                        detailsObj,
                                                        "pinswg_targetextended"
                                                    ) && (
                                                        <div className="govuk-summary-list__row">
                                                            <dt className="govuk-summary-list__key">
                                                                {t(
                                                                    "case:summary-eia-screening-target-extended-label"
                                                                )}
                                                            </dt>{" "}
                                                            <dd className="govuk-summary-list__value">
                                                                {hasOwn(
                                                                    detailsObj,
                                                                    "pinswg_targetextended"
                                                                )
                                                                    ? !_.isEmpty(
                                                                          detailsObj.pinswg_targetextended
                                                                      )
                                                                        ? formatDates(
                                                                              detailsObj.pinswg_targetextended
                                                                          )
                                                                        : t(
                                                                              "case:summary-awaiting-information-label"
                                                                          )
                                                                    : t(
                                                                          "case:summary-awaiting-information-label"
                                                                      )}
                                                            </dd>
                                                        </div>
                                                    )}
                                                    <div className="govuk-summary-list__row">
                                                        <dt className="govuk-summary-list__key">
                                                            {t(
                                                                "case:summary-eia-screening-direction-issued-label"
                                                            )}
                                                        </dt>{" "}
                                                        <dd className="govuk-summary-list__value">
                                                            {hasOwn(
                                                                detailsObj,
                                                                "pinswg_directionissueddate"
                                                            )
                                                                ? !_.isEmpty(
                                                                      detailsObj.pinswg_directionissueddate
                                                                  )
                                                                    ? formatDates(
                                                                          detailsObj.pinswg_directionissueddate
                                                                      )
                                                                    : t(
                                                                          "case:summary-awaiting-information-label"
                                                                      )
                                                                : t(
                                                                      "case:summary-awaiting-information-label"
                                                                  )}
                                                        </dd>
                                                    </div>

                                                    {hasValidKey(
                                                        detailsObj,
                                                        "pinswg_eiarequired"
                                                    ) && (
                                                        <div className="govuk-summary-list__row">
                                                            <dt className="govuk-summary-list__key">
                                                                {t(
                                                                    "case:summary-eia-required-label"
                                                                )}
                                                            </dt>
                                                            <dd className="govuk-summary-list__value">
                                                                {hasOwn(
                                                                    detailsObj,
                                                                    "pinswg_eiarequired"
                                                                )
                                                                    ? detailsObj.pinswg_eiarequired
                                                                        ? router.locale ==
                                                                          "cy"
                                                                            ? "Ie"
                                                                            : "Yes"
                                                                        : router.locale ==
                                                                            "cy"
                                                                          ? "Na"
                                                                          : "No"
                                                                    : t(
                                                                          "case:summary-awaiting-information-label"
                                                                      )}
                                                            </dd>
                                                        </div>
                                                    )}
                                                </dl>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="card" id="key-dates-card">
                                        <div className="card-body">
                                            <div>
                                                <h4 className="govuk-heading-s ">
                                                    {t(
                                                        "case:summary-eia-scoping-heading"
                                                    )}
                                                </h4>

                                                <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
                                                    <div className="govuk-summary-list__row">
                                                        <dt className="govuk-summary-list__key">
                                                            {t(
                                                                "case:summary-eia-scoping-start-date-label"
                                                            )}
                                                        </dt>{" "}
                                                        <dd className="govuk-summary-list__value">
                                                            {hasOwn(
                                                                detailsObj,
                                                                "pinswg_scopingstartdate"
                                                            )
                                                                ? !_.isEmpty(
                                                                      detailsObj.pinswg_scopingstartdate
                                                                  )
                                                                    ? formatDates(
                                                                          detailsObj.pinswg_scopingstartdate
                                                                      )
                                                                    : t(
                                                                          "case:summary-awaiting-information-label"
                                                                      )
                                                                : t(
                                                                      "case:summary-awaiting-information-label"
                                                                  )}
                                                        </dd>
                                                    </div>
                                                    <div className="govuk-summary-list__row">
                                                        <dt className="govuk-summary-list__key">
                                                            {t(
                                                                "case:summary-eia-scoping-target-date-label"
                                                            )}
                                                        </dt>{" "}
                                                        <dd className="govuk-summary-list__value">
                                                            {hasOwn(
                                                                detailsObj,
                                                                "pinswg_scopingtargetdate"
                                                            )
                                                                ? !_.isEmpty(
                                                                      detailsObj.pinswg_scopingtargetdate
                                                                  )
                                                                    ? formatDates(
                                                                          detailsObj.pinswg_scopingtargetdate
                                                                      )
                                                                    : t(
                                                                          "case:summary-awaiting-information-label"
                                                                      )
                                                                : t(
                                                                      "case:summary-awaiting-information-label"
                                                                  )}
                                                        </dd>
                                                    </div>
                                                    {hasValidKey(
                                                        detailsObj,
                                                        "pinswg_scopingtargetextended"
                                                    ) && (
                                                        <div className="govuk-summary-list__row">
                                                            <dt className="govuk-summary-list__key">
                                                                {t(
                                                                    "case:summary-eia-scoping-target-extended-label"
                                                                )}
                                                            </dt>
                                                            <dd className="govuk-summary-list__value">
                                                                {hasOwn(
                                                                    detailsObj,
                                                                    "pinswg_scopingtargetextended"
                                                                )
                                                                    ? !_.isEmpty(
                                                                          detailsObj.pinswg_scopingtargetextended
                                                                      )
                                                                        ? formatDates(
                                                                              detailsObj.pinswg_scopingtargetextended
                                                                          )
                                                                        : t(
                                                                              "case:summary-awaiting-information-label"
                                                                          )
                                                                    : t(
                                                                          "case:summary-awaiting-information-label"
                                                                      )}
                                                            </dd>
                                                        </div>
                                                    )}
                                                    <div className="govuk-summary-list__row">
                                                        <dt className="govuk-summary-list__key">
                                                            {t(
                                                                "case:summary-eia-scoping-direction-issued-date-label"
                                                            )}
                                                        </dt>{" "}
                                                        <dd className="govuk-summary-list__value">
                                                            {hasOwn(
                                                                detailsObj,
                                                                "pinswg_scopingoutcomeissueddate"
                                                            )
                                                                ? !_.isEmpty(
                                                                      detailsObj.pinswg_scopingoutcomeissueddate
                                                                  )
                                                                    ? formatDates(
                                                                          detailsObj.pinswg_scopingoutcomeissueddate
                                                                      )
                                                                    : t(
                                                                          "case:summary-awaiting-information-label"
                                                                      )
                                                                : t(
                                                                      "case:summary-awaiting-information-label"
                                                                  )}
                                                        </dd>
                                                    </div>
                                                </dl>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {getFormCollectionByID(appealTypeID)
                            .PrimaryIdAttribute == "pinswg_sipscase" && (
                            <EIADetails props={props} />
                        )}
                        {hasEventsTabData && (
                            <div
                                className={
                                    whichTab == "case-events"
                                        ? "govuk-tabs__panel "
                                        : "govuk-tabs__panel govuk-tabs__panel--hidden"
                                }
                                id="case-events"
                            >
                                <EventsDetails eventsObj={props.eventsObj} />
                            </div>
                        )}

                        {hasMediaTabData && (
                            <div
                                className={
                                    whichTab == "case-media"
                                        ? "govuk-tabs__panel "
                                        : "govuk-tabs__panel govuk-tabs__panel--hidden"
                                }
                                id="case-media"
                            >
                                <MediaDetails
                                    mediaObj={props.mediaObj}
                                    whichTab={whichTab}
                                />
                            </div>
                        )}

                        <div
                            className={
                                whichTab == "case-documents"
                                    ? "govuk-tabs__panel "
                                    : "govuk-tabs__panel govuk-tabs__panel--hidden"
                            }
                            id="case-documents"
                        >
                            <Documents
                                incidentid={
                                    props.incidentid ||
                                    setCaseQueryObj.value[0].incidentid
                                }
                                caseReference={props.caseReference}
                                searchResultsObj={props.searchResultsObj}
                                searchDetailsObj={props.searchDetailsObj}
                                documentDetailsObj={props.documentDetailsObj}
                                docsOffline={docsOffline}
                                showFilteredDocs={props.showFilteredDocs}
                            />
                        </div>
                        <div
                            className={
                                whichTab == "case-status"
                                    ? "govuk-tabs__panel "
                                    : "govuk-tabs__panel govuk-tabs__panel--hidden"
                            }
                            id="case-status"
                        >
                            <StatusDetails />
                        </div>
                    </div>
                </div>
            </>
        ) : (
            <>
                <div>
                    <div className="govuk-grid-row">
                        <div className="govuk-grid-column-full">
                            <h1>{t("case:summary-no-details-label")}</h1>
                        </div>
                    </div>
                </div>
                {showLoginCheck == "true" && (
                    <div className="govuk-grid-row">
                        <div className="govuk-grid-column-full ">
                            <div className="govuk-button-group">
                                {noRepresentationLink.includes(
                                    router.pathname
                                ) == true ? (
                                    ""
                                ) : (
                                    <Link
                                        href="/representation"
                                        className="govuk-button"
                                    >
                                        {t(
                                            "case:summary-make-representation-label"
                                        )}
                                    </Link>
                                )}
                            </div>
                        </div>
                    </div>
                )}
            </>
        );

    function showSummary(
        appealTypeID,
        casesObj,
        detailsObj,
        formatDates,
        linkedCasesList,
        currentView,
        showMap
    ) {
        const id = getFormCollectionByID(
            appealTypeID || setCaseQueryObj.value[0].pinswg_appealcasetype
        ).PrimaryIdAttribute;

        const Component = CaseTypes[capitalizeFirstLetter(id)];

        return Component ? (
            <Component
                casesObj={casesObj}
                detailsObj={detailsObj}
                formatDates={formatDates}
                linkedCasesList={linkedCasesList}
                currentView={currentView}
                showMap={showMap}
            />
        ) : null;
    }

    const fallbackIncidentId = setCaseQueryObj?.value?.[0]?.incidentid;

    useEffect(() => {
        const linkCaseObj = async () => {
            let docObj = await getLinkedCases(
                incidentid || fallbackIncidentId
            ).then((data) => {
                //console.log(data);
                setCurrentLinkedCases(data);
                return data;
            });

            return linkCaseObj;
        };

        const linkedCases = linkCaseObj();
    }, [incidentid, fallbackIncidentId, setCurrentLinkedCases]);

    let now = new Date();
    let expDate = new Date(now);

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

    function formatDates(dateObj, showTime) {
        var dateObj = new Date(dateObj);
        var dd = String(dateObj.getDate()).padStart(2, "0");
        var mm = String(dateObj.getMonth() + 1).padStart(2, "0"); //January is 0!
        var yyyy = dateObj.getFullYear();
        var hh = dateObj.getHours();
        hh = ("0" + hh).slice(-2);
        var mins = dateObj.getMinutes();
        mins = ("0" + mins).slice(-2);

        const dateStr = showTime
            ? hh == 0 && mins == 0
                ? ""
                : hh + ":" + mins
            : dd + "/" + mm + "/" + yyyy + " ";
        return dateStr;
    }

    function linkedCasesList(linkedCasesReference) {
        //console.log(linkedCasesReference);

        linkedCasesReference = linkedCasesReference.value || [];

        return (
            <>
                <ul className="govuk-list govuk-!-font-size-16">
                    {linkedCasesReference.map((item, key) => {
                        return (
                            <li key={key}>
                                <Link
                                    href={
                                        router.locale == "cy"
                                            ? "/canlyniadauchwilio?q=" +
                                              item.title +
                                              "&lk=1"
                                            : "/searchresults?q=" +
                                              item.title +
                                              "&lk=1"
                                    }
                                    className=""
                                >
                                    {item.title}
                                </Link>
                            </li>
                        );
                        //console.log(item.incidentid, item.title);
                    })}
                </ul>
            </>
        );
    }

    if (status == "authenticated" && cookies.pedwWatchCase != null) {
        selectWatchedCase(
            props.accountDetails.accountDetails.contactid,
            incidentid,
            appealTypeID
        );
        destroyCookie({}, "pedwWatchCase", { path: "/" });
    }

    return <>{showDetailsBlock}</>;
};

const mapStateToProps = (state) => {
    return {
        accountDetails: state.accountDetails,
        currentView: state.currentView,
        search: state.search,
        // searchResultsObj: state.searchResultsObj,
        documentDetailsObj: state.searchResultsObj.documentDetailsObj,
        formData: state.formData,
        appealType: state.appealType,
        form: state.form,
        myCases: state.myCases,
        watchedCases: state.watchedCases,
        myRepresentations: state.myRepresentations,
        awaitingSubmission: state.awaitingSubmission,
        mySubmittedReps: state.myRepresentations.mySubmittedReps
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        setCurrentLinkedCases: (parentIncidentid) => {
            dispatch(setCurrentLinkedCases(parentIncidentid));
        },
        setCurrentReference: (currentReference) => {
            dispatch(setCurrentReference(currentReference));
        },
        setWatchedCases: (watchedCases) => {
            dispatch(setWatchedCases(watchedCases));
        },
        setWatchedCasesDetails: (watchedCasesDetails) => {
            dispatch(setWatchedCasesDetails(watchedCasesDetails));
        },
        setCurrentView: (currentView) => {
            dispatch(setCurrentView(currentView));
        }
    };
};

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