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 {
    setWatchedCases,
    setWatchedCasesDetails,
} from "../../store/watchedCases/action";
import { useEffect } from "react";
import { parseCookies, setCookie, destroyCookie } from "nookies";

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

import {
    createWatchedCases,
    getToken,
    getWatchedCasesProxy,
    getPortalModuleDetailsProxy,
    deleteWatchedCases,
} from "../../actions";

const SearchResults = (props) => {
    const {
        searchString,
        searchResultsObj,
        searchDetailsObj,
        setCurrentReference,
        setSearchResults,
        setSearchDetails,
        advancedSearch,
        myportal,
        watchedCases,
        setWatchedCases,
        setWatchedCasesDetails,
    } = 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 cookies = parseCookies();

    const selectWatchedCase = (loggedInUser, incidentID, appealType) => {
        let token = getToken();

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

        createWatchedCases(updateBody)
            .then((data) => data)
            .then(() => {
                getWatchedCasesProxy(token, cookies.pinsUser).then((data) => {
                    setWatchedCases(data),
                        getDetails(token, data, "myWatchedCases").then(
                            (data) => {
                                setWatchedCasesDetails(data);
                            }
                        );
                });
            });
    };

    const isWatchedCase = (whichIncident) => {
        let isWatched = jsonpath.query(
            watchedCases,
            "$..value[?(@._pinswg_watchedcase_value=='" + whichIncident + "')]"
        );

        return isWatched;
    };

    const deleteItem = (caseID, topThreeType) => {
        let token = getToken();
        let cookies = parseCookies();
        topThreeType == "watchedCases" &&
            deleteWatchedCases(caseID)
                .then((data) => data)
                .then(() => {
                    getWatchedCasesProxy(token, cookies.pinsUser).then(
                        (data) => {
                            setWatchedCases(data),
                                getDetails(token, data, "myWatchedCases").then(
                                    (data) => {
                                        setWatchedCasesDetails(data);
                                    }
                                );
                        }
                    );
                });
    };

    const getDetails = (token, resultsObj, detailsType) => {
        //console.log(resultsObj);
        let detailsArr = [];
        resultsObj = resultsObj.value;
        const detailsObj = resultsObj.map((searchDetail, index) => {
            if (searchDetail.pinswg_appealcasetype == null) {
                console.log(
                    detailsType != "myWatchedCases"
                        ? searchDetail.ticketnumber
                        : searchDetail[
                              "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
                          ]
                );
            } else {
                detailsArr.push(
                    getPortalModuleDetailsProxy(
                        token,
                        getFormCollectionByID(
                            searchDetail.pinswg_appealcasetype
                        ).LogicalCollectionName,
                        detailsType != "myWatchedCases"
                            ? searchDetail.ticketnumber
                            : searchDetail[
                                  "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
                              ]
                    )
                );
            }
        });
        //console.log(detailsArr);
        return Promise.all(detailsArr);
    };

    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>
                        {myportal == "true" && (
                            <dd className="govuk-summary-list__key govuk-!-font-size-16 govuk-summary-list__action"></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"
                                                ? myportal == "true"
                                                    ? "/fymhorth/achos"
                                                    : "/achos"
                                                : myportal == "true"
                                                ? "/myportal/case"
                                                : "/case"
                                        }
                                    >
                                        <a
                                            className="govuk-link--no-underline"
                                            onClick={() => {
                                                setCurrentReference({
                                                    "currentReference":
                                                        item.title,
                                                    "currentType":
                                                        "searchResultsObj",
                                                    "incidentid":
                                                        item.incidentid,
                                                    "appealType":
                                                        item.pinswg_appealcasetype,
                                                });
                                            }}
                                        >
                                            <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>
                                {myportal == "true" && (
                                    <dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-summary-list__action">
                                        {isWatchedCase(item.incidentid).length >
                                            0 ==
                                        true ? (
                                            <span
                                                className="govuk-summary-list__actionLink watched_link"
                                                onClick={() => {
                                                    deleteItem(
                                                        isWatchedCase(
                                                            item.incidentid
                                                        )[0].pinswg_watchlistid,

                                                        "watchedCases"
                                                    );
                                                    alert(
                                                        "You have stopped watching case " +
                                                            item.title
                                                    );
                                                }}
                                                title="Stop watching this case"
                                            >
                                                &minus;
                                            </span>
                                        ) : (
                                            <span
                                                className="govuk-summary-list__actionLink"
                                                onClick={() => {
                                                    selectWatchedCase(
                                                        cookies.pinsUser,
                                                        item.incidentid,
                                                        item.pinswg_appealcasetype
                                                    );
                                                    alert(
                                                        "You are watching case " +
                                                            item.title
                                                    );
                                                }}
                                                title="Watch this case"
                                            >
                                                +
                                            </span>
                                        )}
                                    </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));
        },
        setWatchedCases: (watchedCases) => {
            dispatch(setWatchedCases(watchedCases));
        },
        setWatchedCasesDetails: (watchedCasesDetails) => {
            dispatch(setWatchedCasesDetails(watchedCasesDetails));
        },
    };
};

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