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 { useCallback, useState } from "react";
import { connect } from "react-redux";
import {
    getAdvancedSearchPaged,
    getBasicSearchPaged
} from "../../actions/services/searchService";
import transLookup from "../../data/lookuptranslations.json";
import {
    setCurrentPage,
    setCurrentReference
} from "../../store/currentView/action";

import { parseCookies, setCookie } from "nookies";
import { useEffect } from "react";
import { setLoggedInUserId } from "../../store/accountDetails/action";
import {
    setSearchDetails,
    setSearchResults
} from "../../store/searchOutput/action";
import {
    setWatchedCases,
    setWatchedCasesDetails
} from "../../store/watchedCases/action";

import { getDetailsProxy, getSearchDetailsPaged } from "../utils";
import PaginationControl from "./pagination";

import { signIn, useSession } from "next-auth/react";
import {
    createWatchedCases,
    deleteWatchedCases,
    getWatchedCasesProxy
} from "../../actions/services/portalService";

import { sendGAEvent } from "@next/third-parties/google";
import RepsOnResults from "./repsonresults";
import LiveLink from "./liveLink";
import { query } from "jsonpath";

const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");

const highlightText = (text, query) => {
    if (!text || !query) return text;

    const terms = Array.isArray(query)
        ? query
        : String(query).trim().split(/\s+/).filter(Boolean);

    if (!terms.length) return text;

    const regex = new RegExp(`(${terms.map(escapeRegExp).join("|")})`, "gi");

    return String(text)
        .split(regex)
        .map((part, i) =>
            regex.test(part) ? (
                <mark key={i} className="search-highlight">
                    {part}
                </mark>
            ) : (
                part
            )
        );
};

const SearchResults = (props) => {
    const {
        searchString,
        searchResultsObj,
        searchDetailsObj,
        setCurrentReference,
        setSearchResults,
        setSearchDetails,
        advancedSearch,
        myportal,
        watchedCases,
        setWatchedCases,
        setWatchedCasesDetails,
        isLinkedCase,
        setCurrentPage,
        showLoginCheck
    } = props;
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;
    const { data: session } = useSession();

    var resultsArr = searchResultsObj.value || [];

    const hasCount =
        searchResultsObj &&
        typeof searchResultsObj["@odata.count"] === "number";

    const [searchLoaded, setSearchLoaded] = useState(false);
    // const [showSpinnerState, setShowSpinnerState] = useState(false);

    const [showSpinnerState, setShowSpinnerState] = useState(
        !(searchResultsObj && searchResultsObj["@odata.count"] != null)
    );

    const [selectedOption, setSelectedOption] = useState(10);
    const [orderByState, setOrderbyState] = useState("createdon");
    const [fieldSortState, setfieldSortState] = useState("desc");
    const [loginToWatch, setLoginToWatch] = useState("true");

    let spinnerState = () => {
        showSpinnerState == true
            ? setShowSpinnerState(false)
            : setShowSpinnerState(true);
    };

    const cookies = parseCookies();

    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(props.accountDetails.loggedinUserId).then(
                    (data) => {
                        (setWatchedCases(data),
                            getDetailsProxy(data, "myWatchedCases").then(
                                (data) => {
                                    setWatchedCasesDetails(data);
                                }
                            ));
                    }
                );
            });
    };

    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 isEmailNotifications = (whichIncident) => {
        let isWatched = jsonpath({
            path:
                "$..value[?(@ && @._pinswg_watchedcase_value=='" +
                whichIncident +
                "')]",

            json: watchedCases,
            eval: true
        });

        return isWatched;
    };

    const deleteItem = (caseID, topThreeType) => {
        let cookies = parseCookies();
        topThreeType == "watchedCases" &&
            deleteWatchedCases(caseID)
                .then((data) => data)
                .then(() => {
                    getWatchedCasesProxy(
                        props.accountDetails.loggedinUserId
                    ).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);
                                }
                            ));
                    });
                });
    };

    function hasValidKey(obj, key) {
        return (
            obj.hasOwnProperty(key) &&
            obj[key] !== null &&
            obj[key] !== undefined &&
            obj[key] !== ""
        );
    }

    const highlightQuery = advancedSearch
        ? searchString.map(([key, val]) => val).filter(Boolean)
        : searchString;

    const ResultsView = (resultsArr, currPage) => {
        return (
            <>
                <dl className="govuk-summary-list govuk-!-margin-bottom-9 results">
                    <div className="govuk-summary-list__row results-headings">
                        <dd className="govuk-summary-list__key govuk-!-font-size-16 results_wider  ">
                            <button
                                type="button"
                                onClick={() => sortDataBy("title")}
                                className={
                                    orderByState == "title"
                                        ? fieldSortState == "asc"
                                            ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
                                }
                            >
                                {t("search:searchresults-case-reference-label")}
                            </button>
                        </dd>
                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
                            {t("search:searchresults-site-address-label")}
                        </dd>
                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
                            <button
                                type="button"
                                onClick={() => sortDataBy("_customerid_value")}
                                className={
                                    orderByState == "_customerid_value"
                                        ? fieldSortState == "asc"
                                            ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
                                }
                            >
                                {t("search:searchresults-applicant-label")}
                            </button>
                        </dd>
                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
                            <button
                                type="button"
                                onClick={() =>
                                    sortDataBy("_pinswg_associatedlpa_value")
                                }
                                className={
                                    orderByState ==
                                    "_pinswg_associatedlpa_value"
                                        ? fieldSortState == "asc"
                                            ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
                                }
                            >
                                {t("search:searchresults-authority-label")}
                            </button>
                        </dd>
                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
                            <button
                                type="button"
                                onClick={() =>
                                    sortDataBy("pinswg_appealcasetype")
                                }
                                className={
                                    orderByState == "pinswg_appealcasetype"
                                        ? fieldSortState == "asc"
                                            ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
                                }
                            >
                                {t("search:searchresults-case-type-label")}
                            </button>
                        </dd>
                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
                            {/* {t("search:searchresults-status-label")} */}
                            <button
                                type="button"
                                onClick={() => sortDataBy("statuscode")}
                                className={
                                    orderByState == "statuscode"
                                        ? fieldSortState == "asc"
                                            ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
                                }
                            >
                                {t("search:searchresults-status-label")}
                            </button>
                        </dd>

                        <dd className="govuk-summary-list__key govuk-!-font-size-16 govuk-summary-list__action"></dd>
                    </div>
                    {showSpinnerState == true ? (
                        <div className="govuk-summary-list__row">
                            <div className="govuk-!-margin-top-9 govuk-!-margin-bottom-9 govuk-!-font-weight-bold govuk-!-font-size-20  ">
                                {t("common:spinner-fetching-data")}
                                <img
                                    className="data-loading-icon"
                                    src="/assets/images/loading.gif"
                                    alt={
                                        router.locale == "cy"
                                            ? "Nôl data"
                                            : "Fetching data"
                                    }
                                />
                            </div>
                        </div>
                    ) : (
                        resultsArr.map((item, key) => {
                            let detailsObj = jsonpath({
                                path:
                                    '$..[?(@ && @.ticketnumber=="' +
                                    item.ticketnumber +
                                    '")]',
                                json: searchDetailsObj,
                                eval: true
                            });

                            Object.assign(item, item.pinswg_sipscase);

                            detailsObj = detailsObj[0] || {};
                            return (
                                <div
                                    className="govuk-summary-list__row"
                                    key={key}
                                >
                                    <dd className="govuk-summary-list__value govuk-!-font-size-16  ">
                                        <div></div>
                                        <Link
                                            href={{
                                                pathname:
                                                    (router.locale == "cy"
                                                        ? myportal == true
                                                            ? "/fymhorth/achos"
                                                            : "/achos"
                                                        : myportal == true
                                                          ? "/myportal/case"
                                                          : "/case") +
                                                    "/" +
                                                    item.ticketnumber,
                                                query: {
                                                    ...router.query,
                                                    adv: advancedSearch
                                                        ? "true"
                                                        : "false"
                                                }
                                            }}
                                            className="govuk-link--no-underline"
                                            onClick={() => {
                                                (sendGAEvent(
                                                    "event",
                                                    "CaseViewed",
                                                    {
                                                        caseReference:
                                                            item.ticketnumber
                                                    }
                                                ),
                                                    setCurrentReference({
                                                        "statuscode":
                                                            item.statuscode,
                                                        "ticketnumber":
                                                            item.ticketnumber,
                                                        "currentReference":
                                                            item.title,
                                                        "currentType":
                                                            "searchResultsObj",
                                                        "incidentid":
                                                            item.incidentid,
                                                        "appealType":
                                                            item.pinswg_appealcasetype,
                                                        "showLoginCheck":
                                                            props.showLoginCheck,
                                                        "specialistProcess":
                                                            detailsObj.hasOwnProperty(
                                                                "pinswg_speacialistcaseprocess"
                                                            )
                                                                ? detailsObj.pinswg_speacialistcaseprocess
                                                                : detailsObj.hasOwnProperty(
                                                                        "pinswg_specialistcaseprocess"
                                                                    )
                                                                  ? detailsObj.pinswg_specialistcaseprocess
                                                                  : ""
                                                    }));
                                            }}
                                        >
                                            <span className="results-visually-hidden">
                                                {t(
                                                    "search:searchresults-case-reference-label"
                                                )}
                                                :
                                            </span>
                                            {highlightText(
                                                item.title,
                                                highlightQuery
                                            )}
                                        </Link>

                                        {item.hasOwnProperty(
                                            "pinswg_sipscase"
                                        ) &&
                                            item.hasOwnProperty(
                                                "_pinswg_projecttype_value@OData.Community.Display.V1.FormattedValue"
                                            ) && (
                                                <div className="govuk-!-font-size-14">
                                                    {
                                                        item[
                                                            "_pinswg_projecttype_value@OData.Community.Display.V1.FormattedValue"
                                                        ]
                                                    }
                                                </div>
                                            )}
                                        <RepsOnResults
                                            detailsObj={detailsObj}
                                            appealType={
                                                item.pinswg_appealcasetype
                                            }
                                        />
                                        <LiveLink
                                            detailsObj={detailsObj}
                                            appealType={
                                                item.pinswg_appealcasetype
                                            }
                                        />
                                    </dd>
                                    <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                        <span className="results-visually-hidden">
                                            {t(
                                                "search:searchresults-site-address-label"
                                            )}
                                            :
                                        </span>
                                        {_.has(
                                            detailsObj,
                                            "pinswg_projectlocation"
                                        )
                                            ? 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]
                                                : ""
                                            : // : hasValidKey(
                                              //       item,
                                              //       "pinswg_caseaddress"
                                              //   )
                                              // ? item.pinswg_caseaddress != null
                                              //     ? item.pinswg_caseaddress.indexOf(
                                              //           ";"
                                              //       ) < 0
                                              //         ? item.pinswg_caseaddress
                                              //         : router.locale == "cy"
                                              //         ? item.pinswg_caseaddress.split(
                                              //               ";"
                                              //           )[1]
                                              //         : item.pinswg_caseaddress.split(
                                              //               ";"
                                              //           )[0]
                                              //     : ""
                                              ""}
                                        {_.has(
                                            detailsObj,
                                            "pinswg_siteaddressline1"
                                        )
                                            ? detailsObj.pinswg_siteaddressline1
                                            : ""}

                                        {/* {detailsObj.pinswg_siteaddressline1 !=
                                    null && <br />} */}

                                        {_.has(
                                            detailsObj,
                                            "pinswg_siteaddressline1"
                                        ) &&
                                            detailsObj.pinswg_siteaddressline1 !=
                                                null && <br />}

                                        {_.has(
                                            detailsObj,
                                            "pinswg_siteaddressline1"
                                        )
                                            ? detailsObj.pinswg_siteaddressline2
                                            : ""}

                                        {_.has(
                                            detailsObj,
                                            "pinswg_siteaddressline2"
                                        ) &&
                                            detailsObj.pinswg_siteaddressline2 !=
                                                null && <br />}
                                        {_.has(
                                            detailsObj,
                                            "pinswg_siteaddresstown"
                                        )
                                            ? detailsObj.pinswg_siteaddresstown
                                            : ""}
                                        {_.has(
                                            detailsObj,
                                            "pinswg_siteaddresstown"
                                        ) &&
                                            detailsObj.pinswg_siteaddresstown !=
                                                null && <br />}

                                        {_.has(
                                            detailsObj,
                                            "pinswg_siteaddresscounty"
                                        )
                                            ? detailsObj.pinswg_siteaddresscounty
                                            : ""}
                                        {_.has(
                                            detailsObj,
                                            "pinswg_siteaddresscounty"
                                        ) &&
                                            detailsObj.pinswg_siteaddresscounty !=
                                                null && <br />}
                                        {_.has(
                                            detailsObj,
                                            "pinswg_siteaddresspostcode"
                                        )
                                            ? detailsObj.pinswg_siteaddresspostcode
                                            : ""}
                                    </dd>
                                    <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                        <span className="results-visually-hidden">
                                            {t(
                                                "search:searchresults-applicant-label"
                                            )}
                                            :
                                        </span>
                                        {item.pinswg_appellantagent == 846040001
                                            ? item.pinswg_appellantfirstname +
                                              " " +
                                              item.pinswg_appellantlastname
                                            : _.has(detailsObj, [
                                                    "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
                                                ])
                                              ? detailsObj[
                                                    "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
                                                ]
                                              : ""}
                                    </dd>
                                    <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                        <span className="results-visually-hidden">
                                            {t(
                                                "search:searchresults-authority-label"
                                            )}
                                            :
                                        </span>
                                        {_.has(item, [
                                            "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                        ])
                                            ? router.locale == "cy"
                                                ? jsonpath({
                                                      path:
                                                          '$..[?(@ && @.value=="' +
                                                          item[
                                                              "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                          ] +
                                                          '")].value_cy',
                                                      json: transLookup,
                                                      eval: true
                                                  })
                                                : item[
                                                      "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                  ] || "N/A"
                                            : ""}
                                        {item?.pinswg_lpareference && (
                                            <>
                                                <span className="govuk-!-padding-top-2 govuk-!-font-size-14 ref-block">
                                                    <strong className="ref-label">
                                                        Ref:
                                                    </strong>{" "}
                                                    {highlightText(
                                                        item.pinswg_lpareference,
                                                        highlightQuery
                                                    )}
                                                </span>
                                            </>
                                        )}
                                    </dd>
                                    <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                        <span className="results-visually-hidden">
                                            {t(
                                                "search:searchresults-case-type-label"
                                            )}
                                            :
                                        </span>
                                        {router.locale == "cy"
                                            ? jsonpath({
                                                  path:
                                                      '$..[?(@ && @.value=="' +
                                                      item[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
                                                      '")].value_cy',
                                                  json: transLookup,
                                                  eval: true
                                              })
                                            : item[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                              ] || "N/A"}
                                    </dd>
                                    <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                        <span className="results-visually-hidden">
                                            {t(
                                                "search:searchresults-status-label"
                                            )}
                                            :
                                        </span>

                                        {router.locale == "cy"
                                            ? jsonpath({
                                                  path:
                                                      '$..[?(@ && @.value=="' +
                                                      item[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
                                                      '")].value_cy',
                                                  json: transLookup,
                                                  eval: true
                                              })
                                            : item[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
                                              ] || "N/A"}
                                    </dd>
                                    {myportal == true && (
                                        <dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-summary-list__action">
                                            {isWatchedCase(item.incidentid)
                                                .length >
                                                0 ==
                                            true ? (
                                                <button
                                                    className="govuk-summary-list__actionLink watched_link"
                                                    onClick={() => {
                                                        confirm(
                                                            t(
                                                                "case:you-have-stopped-watching-label"
                                                            ) +
                                                                item.title +
                                                                "?"
                                                        ) &&
                                                            deleteItem(
                                                                isWatchedCase(
                                                                    item.incidentid
                                                                )[0]
                                                                    .pinswg_watchlistid,

                                                                "watchedCases"
                                                            );
                                                    }}
                                                    title={t(
                                                        "case:stop-watching-case-link"
                                                    )}
                                                >
                                                    <span className="eye"></span>
                                                </button>
                                            ) : (
                                                <button
                                                    className="govuk-summary-list__actionLink watchLink"
                                                    onClick={() => {
                                                        confirm(
                                                            t(
                                                                "case:you-are-watching-label"
                                                            ) +
                                                                item.title +
                                                                "?"
                                                        ) &&
                                                            selectWatchedCase(
                                                                props
                                                                    .accountDetails
                                                                    .loggedinUserId,
                                                                item.incidentid,
                                                                item.pinswg_appealcasetype
                                                            );
                                                    }}
                                                    title={t(
                                                        "case:watch-this-case-link"
                                                    )}
                                                >
                                                    <span className="eye"></span>
                                                </button>
                                            )}
                                            {isEmailSignUp(item.incidentid)
                                                .length >
                                                0 ==
                                            true ? (
                                                <button
                                                    className="govuk-summary-list__actionLink mailLink watched_link"
                                                    title="Unsubscribe to email updates"
                                                    onClick={() => {
                                                        confirm(
                                                            t(
                                                                "case:summary-unsubscribe-mail-label"
                                                            ) +
                                                                item.title +
                                                                "?"
                                                        ) &&
                                                            deleteItem(
                                                                isEmailSignUp(
                                                                    item.incidentid
                                                                )[0]
                                                                    .pinswg_watchlistid,

                                                                "watchedCases"
                                                            );
                                                    }}
                                                >
                                                    <span className="mailicon icon"></span>
                                                </button>
                                            ) : (
                                                <button
                                                    className="govuk-summary-list__actionLink mailLink"
                                                    title="Email about changes"
                                                    onClick={() => {
                                                        confirm(
                                                            t(
                                                                "case:summary-subscribe-mail-label"
                                                            ) +
                                                                item.title +
                                                                "?"
                                                        ) &&
                                                            selectEmailNotifications(
                                                                props
                                                                    .accountDetails
                                                                    .accountDetails
                                                                    .emailaddress1,
                                                                props
                                                                    .accountDetails
                                                                    .loggedinUserId,
                                                                item.incidentid,
                                                                item.pinswg_appealcasetype
                                                            );
                                                    }}
                                                >
                                                    <span className="mailicon icon"></span>
                                                </button>
                                            )}
                                        </dd>
                                    )}

                                    {(showLoginCheck == "true" ||
                                        showLoginCheck == true) &&
                                        !session && (
                                            <dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-summary-list__action">
                                                <span className="results-visually-hidden">
                                                    {t(
                                                        "case:watch-this-case-link"
                                                    )}
                                                </span>
                                                <button
                                                    className="govuk-summary-list__actionLink watchLink"
                                                    onClick={() => {
                                                        confirm(
                                                            t(
                                                                "case:trying-to-watch-case-label"
                                                            ) +
                                                                item.title +
                                                                "\n\n" +
                                                                t(
                                                                    "case:trying-to-watch-case-redirect-label"
                                                                )
                                                        ) &&
                                                            // signIn("email");
                                                            signIn(undefined, {
                                                                callbackUrl:
                                                                    "/myportal/searchresults?q=" +
                                                                    searchString +
                                                                    "&toWatch=" +
                                                                    item.incidentid +
                                                                    "_" +
                                                                    item.pinswg_appealcasetype
                                                            });
                                                    }}
                                                    title={t(
                                                        "case:watch-this-case-link"
                                                    )}
                                                >
                                                    <span className="eye"></span>
                                                </button>
                                                <button
                                                    className="govuk-summary-list__actionLink mailLink"
                                                    title={t(
                                                        "common:subscribe-title-label"
                                                    )}
                                                    onClick={() => {
                                                        confirm(
                                                            t(
                                                                "case:summary-subscribe-mail-label"
                                                            ) +
                                                                item.title +
                                                                "?"
                                                        ) &&
                                                            selectEmailNotifications(
                                                                props
                                                                    .accountDetails
                                                                    .accountDetails
                                                                    .emailaddress1,
                                                                props
                                                                    .accountDetails
                                                                    .loggedinUserId,
                                                                item.incidentid,
                                                                item.pinswg_appealcasetype
                                                            );
                                                    }}
                                                >
                                                    <span className="mailicon icon"></span>
                                                </button>
                                            </dd>
                                        )}
                                </div>
                            );
                        })
                    )}
                </dl>

                <PaginationControl
                    showNoOfRecords={selectedOption}
                    currentPage={currentPage}
                    searchResultsObj={searchResultsObj}
                    orderBy={orderByState}
                    fieldSort={fieldSortState}
                    spinnerState={spinnerState}
                    getSearchPageResults={getSearchPageResults}
                />
            </>
        );
    };

    const pagesCount = Math.ceil(searchResultsObj["@odata.count"] / 10);

    let currentPage = 0;

    currentPage = decodeURI(searchResultsObj["@odata.nextLink"]).split(
        "skiptoken="
    )[1];
    currentPage =
        typeof currentPage != "undefined"
            ? parseInt(
                  decodeURI(currentPage)
                      .split('pagenumber="')[1]
                      .slice(
                          0,
                          decodeURI(currentPage)
                              .split('pagenumber="')[1]
                              .indexOf('"')
                      ) - 1
              )
            : pagesCount;

    const getSearchPageResults = useCallback(
        (pageNumber, orderBy, fieldSort) => {
            //console.log(advancedSearch, searchString, pageNumber);

            if (advancedSearch) {
                var searchoObj = Object.assign(
                    ...searchString.map(([key, val]) => ({ [key]: val }))
                );

                getAdvancedSearchPaged(
                    searchoObj,
                    pageNumber,
                    orderBy,
                    fieldSort,
                    selectedOption
                )
                    .then((data) => data)
                    .then((data) => {
                        //console.log("getting details", data);
                        setSearchResults(data);
                        return getSearchDetailsPaged(data).then((data) => {
                            setSearchDetails(data);
                            setShowSpinnerState(false);
                        });
                    });
            } else {
                getBasicSearchPaged(
                    searchString,
                    pageNumber,
                    orderBy,
                    fieldSort,
                    selectedOption
                )
                    .then((data) => data)
                    .then((data) => {
                        //console.log("getting details", data);
                        setSearchResults(data);
                        return getSearchDetailsPaged(data).then((data) => {
                            setSearchDetails(data);
                            setShowSpinnerState(false);
                        });
                    });
            }
        },
        [
            advancedSearch,
            searchString,
            selectedOption,
            setSearchDetails,
            setSearchResults
        ]
    );

    const sortDataBy = (whichField) => {
        setOrderbyState(whichField);
        setfieldSortState("asc");

        getSearchPageResults(1, whichField, fieldSortState);
        whichField == orderByState
            ? fieldSortState == "desc"
                ? setfieldSortState("asc")
                : setfieldSortState("desc")
            : setfieldSortState("asc");
        setCurrentPage(1);
        setShowSpinnerState(true);
    };

    useEffect(() => {
        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(
                        props.accountDetails.loggedinUserId
                    ).then((data) => {
                        (setWatchedCases(data),
                            getDetailsProxy(data, "myWatchedCases").then(
                                (data) => {
                                    setWatchedCasesDetails(data);
                                }
                            ));
                    });
                });
        };

        if (searchLoaded) {
            if (selectedOption) {
                setShowSpinnerState(true);
                getSearchPageResults(1, orderByState, fieldSortState);
            }
        } else {
            setSearchLoaded(true);
        }
        if (loginToWatch && router.query.hasOwnProperty("toWatch")) {
            console.log("am in here");
            let now = new Date();
            let expDate = new Date(now);

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

            setLoggedInUserId(props.accountDetails.loggedinUserId);
            setCookie(null, "pinsUser", props.accountDetails.loggedinUserId, {
                path: "/",
                expires: expDate
            });
            selectWatchedCase(
                props.accountDetails.loggedinUserId,
                router.query.toWatch.split("_")[0],
                router.query.toWatch.split("_")[1]
            );
            getSearchPageResults(1, orderByState, fieldSortState);
            setLoginToWatch(false);
        } else {
            //console.log("or am in here");
            setLoginToWatch(false);
        }
    }, [
        selectedOption,
        fieldSortState,
        orderByState,
        searchLoaded,
        loginToWatch,
        setWatchedCases,
        getSearchPageResults,
        setWatchedCasesDetails,
        props.accountDetails.loggedinUserId,
        router.query
    ]);
    //console.log(
    //     "page is here ",
    //     currentPage,
    //     orderByState + " " + fieldSortState
    // );

    return (
        <>
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
                        {isLinkedCase
                            ? t("search:searchresults-title-label-linked-case")
                            : t("search:searchresults-title-label")}
                    </h1>

                    {!isLinkedCase &&
                        (hasCount ? (
                            <p className="govuk-body">
                                {resultsArr.length > 200
                                    ? t("search:searchresults-max-count-label")
                                    : t("search:searchresults-count-label", {
                                          count: searchResultsObj[
                                              "@odata.count"
                                          ]
                                      })}
                                .
                                {advancedSearch != true ? (
                                    <span>
                                        {" "}
                                        {t(
                                            "search:searchresults-case-count-label"
                                        )}{" "}
                                        <em>&quot;{searchString}&quot;</em>
                                    </span>
                                ) : (
                                    ""
                                )}
                            </p>
                        ) : (
                            <p className="govuk-body">
                                {t("common:spinner-fetching-data")}
                                <img
                                    className="data-loading-icon"
                                    src="/assets/images/loading.gif"
                                    alt={
                                        router.locale == "cy"
                                            ? "Nôl data"
                                            : "Fetching data"
                                    }
                                />
                            </p>
                        ))}
                    {searchResultsObj["@odata.count"] > 5 && (
                        <div id="recordCountSelect" className="">
                            <div className="govuk-form-group">
                                <label
                                    className="govuk-label-s "
                                    htmlFor="showNumberOfRecords"
                                >
                                    {t(
                                        "search:searchresults-show-records-label-a"
                                    )}
                                    <select
                                        onChange={(e) => {
                                            setSelectedOption(e.target.value);
                                            setCurrentPage(1);
                                        }}
                                        value={selectedOption}
                                        className="govuk-select"
                                        id="showNumberOfRecords"
                                        name="showNumberOfRecords"
                                    >
                                        <option value="5">5</option>
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                        <option value="50">50</option>
                                    </select>{" "}
                                    {t(
                                        "search:searchresults-show-records-label-b"
                                    )}
                                </label>
                            </div>
                        </div>
                    )}
                    {resultsArr.length > 0 ? (
                        ResultsView(resultsArr, props.currentView.currentPage)
                    ) : (
                        <div className="govuk-grid-row">
                            <div className="govuk-grid-column-two-thirds">
                                <h3>
                                    {t("search:searchresults-no-records-label")}
                                </h3>
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </>
    );
};

const mapDispatchToProps = (dispatch) => {
    return {
        setCurrentReference: (currentReference) => {
            dispatch(setCurrentReference(currentReference));
        },
        setSearchResults: (searchResultsObj) => {
            dispatch(setSearchResults(searchResultsObj));
        },
        setSearchDetails: (searchDetailsObj) => {
            dispatch(setSearchDetails(searchDetailsObj));
        },
        setWatchedCases: (watchedCases) => {
            dispatch(setWatchedCases(watchedCases));
        },
        setWatchedCasesDetails: (watchedCasesDetails) => {
            dispatch(setWatchedCasesDetails(watchedCasesDetails));
        },
        setCurrentPage: (currentPage) => {
            dispatch(setCurrentPage(currentPage));
        }
    };
};

const mapStateToProps = (state) => {
    return {
        currentView: state.currentView,
        accountDetails: state.accountDetails
        // search: state.search,
        // searchResultsObj: state.searchResultsObj,
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(SearchResults);