import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import {
    currentViewActionTypes,
    setCurrentReference,
} from "../../store/currentView/action";
import { connect } from "react-redux";
import jsonpath from "jsonpath";
import _ from "lodash";
import transLookup from "../../data/lookuptranslations.json";
import {
    getBasicSearchPaged,
    getSearchDocumentDetails,
    getBasicSearchDetailsPaged,
    getAdvancedSearchPaged,
} from "../../actions";
import data from "../../data/collections.json";
import { useState } from "react";
import LoadingOverlay from "react-loading-overlay";

import {
    setSearchResults,
    setSearchDetails,
} from "../../store/searchOutput/action";
import { useEffect } from "react";

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

const SearchResults = (props) => {
    const {
        searchString,
        searchResultsObj,
        searchDetailsObj,
        setCurrentReference,
        setSearchResults,
        setSearchDetails,
        advancedSearch,
    } = props;
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;

    var resultsArr = searchResultsObj.value || [];

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

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

    const ResultsView = (resultsArr) => {
        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  ">
                            {t("search:searchresults-case-reference-label")}
                        </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">
                            {t("search:searchresults-applicant-label")}
                        </dd>
                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
                            {t("search:searchresults-authority-label")}
                        </dd>
                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
                            {t("search:searchresults-case-type-label")}
                        </dd>
                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
                            {t("search:searchresults-status-label")}
                        </dd>
                    </div>

                    {resultsArr.map((item, key) => {
                        let detailsObj = jsonpath.query(
                            searchDetailsObj,
                            "$..value[?(@.pinswg_name=='" + item.title + "')]"
                        );
                        detailsObj = detailsObj[0];

                        return (
                            <div className="govuk-summary-list__row" key={key}>
                                <dd className="govuk-summary-list__value govuk-!-font-size-16  ">
                                    <Link
                                        href={
                                            router.locale == "cy"
                                                ? "/achos"
                                                : "/case"
                                        }
                                    >
                                        <a
                                            onClick={() => {
                                                setCurrentReference({
                                                    "currentReference":
                                                        item.title,
                                                    "currentType":
                                                        "searchResultsObj",
                                                    "incidentid":
                                                        item.incidentid,
                                                });
                                            }}
                                        >
                                            <span className="results-visually-hidden">
                                                {t(
                                                    "search:searchresults-case-reference-label"
                                                )}
                                                :
                                            </span>
                                            {item.title}
                                        </a>
                                    </Link>
                                </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_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>
                                    {_.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.query(
                                                  transLookup,
                                                  '$..[?(@.value=="' +
                                                      item[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
                                                      '")].value_cy'
                                              )
                                            : item[
                                                  "_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-case-type-label"
                                        )}
                                        :
                                    </span>
                                    {router.locale == "cy"
                                        ? jsonpath.query(
                                              transLookup,
                                              '$..[?(@.value=="' +
                                                  item[
                                                      "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                  ] +
                                                  '")].value_cy'
                                          )
                                        : 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.query(
                                              transLookup,
                                              '$..[?(@.value=="' +
                                                  item[
                                                      "statuscode@OData.Community.Display.V1.FormattedValue"
                                                  ] +
                                                  '")].value_cy'
                                          )
                                        : item[
                                              "statuscode@OData.Community.Display.V1.FormattedValue"
                                          ] || "N/A"}
                                </dd>
                            </div>
                        );
                    })}
                </dl>
                <PaginationControl
                    currentPage={currentPage}
                    searchResultsObj={searchResultsObj}
                    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 = (pageNumber) => {
        //console.log(advancedSearch, searchString, pageNumber);

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

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

    return (
        <>
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
                        {t("search:searchresults-title-label")}
                    </h1>
                    <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>
                    {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>
                    )}
                </div>
            </div>
            <LoadingOverlay
                active={showSpinnerState}
                spinner
                text={t("common:spinner-searching")}
            />
        </>
    );
};

const mapDispatchToProps = (dispatch) => {
    return {
        setCurrentReference: (currentReference) => {
            dispatch(setCurrentReference(currentReference));
        },
        setSearchResults: (searchResultsObj) => {
            dispatch(setSearchResults(searchResultsObj));
        },
        setSearchDetails: (searchDetailsObj) => {
            dispatch(setSearchDetails(searchDetailsObj));
        },
    };
};

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