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, useEffect, useState } from "react";
import { connect } from "react-redux";
import transLookup from "../../data/lookuptranslations.json";
import PaginationControl from "./pagination";
import RepsOnResults from "./repsonresults";

import {
    getBasicDNSSearchPaged,
    getDNSCoords
} from "../../actions/services/searchService";

import GoogleMapReact from "google-map-react";
import { parseCookies } from "nookies";
import OSPoint from "ospoint";
import {
    createWatchedCases,
    deleteWatchedCases,
    getWatchedCasesProxy
} from "../../actions/services/portalService";
import {
    setCurrentPage,
    setCurrentReference
} from "../../store/currentView/action";
import {
    setSearchDetails,
    setSearchResults
} from "../../store/searchOutput/action";
import {
    setWatchedCases,
    setWatchedCasesDetails
} from "../../store/watchedCases/action";
import { getDetailsProxy, getSearchDetailsPaged } from "../utils";
import { signIn, useSession } from "next-auth/react";

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

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

    var resultsArr = searchResultsObj.value || [];

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

    // let dataArray = [];
    // //push your Json Data in the array
    // if (showMap == "true") {
    //     dnsCoords.map((item) => {
    //         let point = new OSPoint(
    //             item.pinswg_anticipatedgridrefnorthing ||
    //                 item.pinswg_anticipatedgridreferencenorthingtext ||
    //                 0,
    //             item.pinswg_anticipatedgridrefeasting ||
    //                 item.pinswg_anticipatedgridreferenceeastingtext ||
    //                 0
    //         );
    //         let siteCoords = point.toOSGB36();
    //         //console.log(siteCoords);
    //         //console.log(item);
    //         dataArray.push({
    //             appellant:
    //                 item[
    //                     "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
    //                 ],
    //             name: item.pinswg_projectname,
    //             lat: parseFloat(siteCoords.latitude),
    //             lng: parseFloat(siteCoords.longitude),
    //             title: item.pinswg_name,
    //         });
    //     });
    // }

    //console.log(dataArray);

    // const ModelsMap = (map, maps) => {
    //     //instantiate array that will hold your Json Data
    //     //console.log("here");
    //     var prev_infowindow = false;
    //     //Loop through the dataArray to create a marker per data using the coordinates in the json
    //     console.log(dataArray.length);
    //     for (let i = 0; i < dataArray.length; i++) {
    //         const infowindow = new google.maps.InfoWindow({
    //             content:
    //                 "<div>" +
    //                 (_.isEmpty(dataArray[i].name)
    //                     ? ""
    //                     : dataArray[i].name.indexOf(";") > 0
    //                     ? router.locale == "cy"
    //                         ? dataArray[i].name.split(";")[1]
    //                         : dataArray[i].name.split(";")[0]
    //                     : dataArray[i].name) +
    //                 "</div>" +
    //                 (dataArray[i].appellant != null
    //                     ? "<div>" + dataArray[i].appellant + "</div>"
    //                     : "") +
    //                 "<div>" +
    //                 dataArray[i].title +
    //                 "</div>",
    //         });
    //         let marker = new maps.Marker({
    //             position: { lat: dataArray[i].lat, lng: dataArray[i].lng },
    //             title: _.isEmpty(dataArray[i].name)
    //                 ? ""
    //                 : dataArray[i].name.indexOf(";") > 0
    //                 ? router.locale == "cy"
    //                     ? dataArray[i].name.split(";")[1]
    //                     : dataArray[i].name.split(";")[0]
    //                 : dataArray[i].name,
    //             map,
    //         });
    //         marker.addListener("click", () => {
    //             if (prev_infowindow) {
    //                 prev_infowindow.close();
    //             }

    //             prev_infowindow = infowindow;
    //             infowindow.open({
    //                 anchor: marker,
    //                 map,
    //                 shouldFocus: true,
    //             });
    //         });
    //     }
    // };

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

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

    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(cookies.pinsUser).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 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);
                                }
                            ));
                    });
                });
    };

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

    const ResultsView = (resultsArr) => {
        return (
            <div className="govuk-grid-row govuk-!-margin-top-9">
                <div className="govuk-grid-column-full">
                    <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("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">
                                Type
                            </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
                                });
                                detailsObj = detailsObj[0];

                                var appType =
                                    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";

                                appType =
                                    appType ==
                                        "Datblygiadau o Arwyddocâd Cenedlaethol" ||
                                    appType ==
                                        "Developments of National Significance"
                                        ? "DNS"
                                        : "SIP";

                                return (
                                    <div
                                        className="govuk-summary-list__row"
                                        key={key}
                                    >
                                        <dd className="govuk-summary-list__value govuk-!-font-size-16  ">
                                            <Link
                                                href={
                                                    router.locale == "cy"
                                                        ? myportal == true
                                                            ? "/fymhorth/dns"
                                                            : "/dns/" +
                                                              item.ticketnumber
                                                        : myportal == true
                                                          ? "/myportal/dns/" +
                                                            item.ticketnumber
                                                          : "/dns/" +
                                                            item.ticketnumber
                                                }
                                                className="govuk-link--no-underline"
                                                onClick={() => {
                                                    setCurrentReference({
                                                        "ticketnumber":
                                                            item.ticketnumber,
                                                        "currentReference":
                                                            item.title,
                                                        "currentType":
                                                            "searchResultsObj",
                                                        "incidentid":
                                                            item.incidentid,
                                                        "appealType":
                                                            item.pinswg_appealcasetype,
                                                        "showMap": showMap,
                                                        "showLoginCheck":
                                                            props.showLoginCheck
                                                    });
                                                }}
                                            >
                                                <span className="results-visually-hidden">
                                                    {t(
                                                        "search:searchresults-case-reference-label"
                                                    )}
                                                    :
                                                </span>
                                                {item.title}
                                            </Link>
                                            <RepsOnResults
                                                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
                                                : ""}
                                            {_.has(
                                                detailsObj,
                                                "pinswg_siteaddressline1"
                                            ) &&
                                                detailsObj.pinswg_siteaddressline1 !=
                                                    null && <br />}
                                            {_.has(
                                                detailsObj,
                                                "pinswg_siteaddressline2"
                                            )
                                                ? detailsObj.pinswg_siteaddressline2
                                                : ""}
                                            {_.has(
                                                detailsObj,
                                                "pinswg_siteaddressline2"
                                            ) &&
                                                detailsObj.pinswg_siteaddressline2 !=
                                                    null && <br />}
                                            {_.has(
                                                detailsObj,
                                                "pinswg_siteaddressline1"
                                            )
                                                ? detailsObj.pinswg_siteaddresstown
                                                : ""}
                                            {_.has(
                                                detailsObj,
                                                "pinswg_siteaddresstown"
                                            ) &&
                                                detailsObj.pinswg_siteaddresstown !=
                                                    null && <br />}
                                            {_.has(
                                                detailsObj,
                                                "pinswg_siteaddressline1"
                                            )
                                                ? detailsObj.pinswg_siteaddresscounty
                                                : ""}
                                            {_.has(
                                                detailsObj,
                                                "pinswg_siteaddresscounty"
                                            ) &&
                                                detailsObj.pinswg_siteaddresscounty !=
                                                    null && <br />}
                                            {_.has(
                                                detailsObj,
                                                "pinswg_siteaddressline1"
                                            )
                                                ? 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>
                                            {_.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(detailsObj, [
                                                "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                            ])
                                                ? router.locale == "cy"
                                                    ? jsonpath({
                                                          path:
                                                              '$..[?(@ && @.value=="' +
                                                              detailsObj[
                                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                              ] +
                                                              '")].value_cy',
                                                          json: transLookup,
                                                          eval: true
                                                      })
                                                    : detailsObj[
                                                          "_pinswg_associatedlpa_value@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>
                                        <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                            <span className="results-visually-hidden">
                                                {t(
                                                    "search:searchresults-status-label"
                                                )}
                                                :
                                            </span>
                                            {appType}
                                        </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(
                                                                    cookies.pinsUser,
                                                                    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
                                                                        .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>
                                                </dd>
                                            )}
                                    </div>
                                );
                            })
                        )}
                    </dl>
                    <PaginationControl
                        showNoOfRecords={selectedOption}
                        currentPage={currentPage}
                        searchResultsObj={searchResultsObj}
                        orderBy={orderByState}
                        fieldSort={fieldSortState}
                        spinnerState={spinnerState}
                        getSearchPageResults={getSearchPageResults}
                    />
                </div>
            </div>
        );
    };

    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);

            getBasicDNSSearchPaged(
                pageNumber,
                orderBy,
                fieldSort,
                selectedOption
            )
                .then((data) => {
                    return data;
                })
                .then((data) => {
                    setSearchResults(data);
                    return getSearchDetailsPaged(data).then((data) => {
                        setSearchDetails(data);
                        setShowSpinnerState(false);
                    });
                });
        },
        [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(() => {
        if (searchLoaded) {
            if (selectedOption) {
                setShowSpinnerState(true);
                getSearchPageResults(1, orderByState, fieldSortState);
            }
        } else {
            setSearchLoaded(true);
        }
    }, [
        selectedOption,
        fieldSortState,
        orderByState,
        searchLoaded,
        getSearchPageResults
    ]);
    return (
        <>
            <div className="govuk-grid-row">
                <div className="flex-container grid-row govuk-body case">
                    <div
                        className={
                            showMap == "true"
                                ? "govuk-grid-column-one-half"
                                : "govuk-grid-column-two-thirds"
                        }
                    >
                        <h1 className="govuk-heading-l">
                            {t("dnsApplications:page-title")}
                        </h1>
                        <p className="govuk-body">
                            {t("dnsApplications:page-intro-paragraph-1")}
                        </p>
                        <p className="govuk-body">
                            {t("dnsApplications:page-intro-list-item-1")}{" "}
                            <a
                                href={t(
                                    "dnsApplications:page-intro-list-item-1-link"
                                )}
                                rel="noreferrer noopener"
                                target="_blank"
                            >
                                {t(
                                    "dnsApplications:page-intro-list-item-1-link"
                                )}
                            </a>
                        </p>

                        <p className="govuk-body">
                            {t("dnsApplications:page-intro-list-item-2")}
                            <a
                                href={t(
                                    "dnsApplications:page-intro-list-item-2-link"
                                )}
                                rel="noreferrer noopener"
                                target="_blank"
                            >
                                {t(
                                    "dnsApplications:page-intro-list-item-2-link"
                                )}
                            </a>
                        </p>
                    </div>

                    {showMap == "true" && (
                        <div className="govuk-grid-column-one-half">
                            <div
                            // style={{
                            //     height: "45vh",
                            //     width: "100%",
                            // }}
                            >
                                {/* <GoogleMapReact
                                    options={function (maps) {
                                        return {
                                            overviewMapControl: true,
                                            mapTypeControl: true,
                                        };
                                    }}
                                    bootstrapURLKeys={{
                                        key: "AIzaSyCzeVrHt544bp_72YCFkw21eDsmI2JEsQo",
                                    }}
                                    defaultCenter={{
                                        id: "",
                                        lat: 52.412272,
                                        lng: -3.437989,
                                    }}
                                    defaultZoom={7}
                                    onGoogleApiLoaded={({ map, maps }) =>
                                        ModelsMap(map, maps)
                                    }
                                /> */}

                                <iframe
                                    src={
                                        "https://datamap.gov.wales/maps/pedw-dev/embed?center=-3.6553189192727347,52.214962933659415&zoom=2#/"
                                    }
                                    //src={"https://datamap.gov.wales/maps/pedw-dev/embed#/"}
                                    width={"100%"}
                                    style={{ maxHeight: "400px" }}
                                    height={"500px"}
                                    className={"mappingFrame"}
                                ></iframe>
                            </div>
                        </div>
                    )}
                </div>
            </div>
            {searchResultsObj["@odata.count"] > 5 && (
                <div id="recordCountSelect" className="govuk-grid-row">
                    <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>
            )}

            {!searchLoaded ? (
                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-two-thirds">
                        <h3>Loading...</h3>
                    </div>
                </div>
            ) : resultsArr.length > 0 ? (
                ResultsView(resultsArr)
            ) : (
                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-two-thirds">
                        <h3>{t("search:searchresults-no-records-label")}</h3>
                    </div>
                </div>
            )}

            {/* {resultsArr.length > 0 ? (
                ResultsView(resultsArr)
            ) : (
                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-two-thirds">
                        <h3>{t("search:searchresults-no-records-label")}</h3>
                    </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)(DNSSearchResults);