import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { connect } from "react-redux";
import jsonpath from "jsonpath";
import _ from "lodash";
import transLookup from "../../data/lookuptranslations.json";
import PaginationControl from "./pagination";
import { useState, useEffect } from "react";
import LoadingOverlay from "react-loading-overlay";
import {
    getBasicDNSSearchPaged,
    getBasicSearchDetailsPaged,
} from "../../actions";
import data from "../../data/collections.json";

import {
    setSearchResults,
    setSearchDetails,
} from "../../store/searchOutput/action";
import { getSearchDetailsPaged } from "../utils";
import {
    currentViewActionTypes,
    setCurrentReference,
    setCurrentPage,
} from "../../store/currentView/action";

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

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

    var resultsArr = searchResultsObj.value || [];

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

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

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

    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  ">
                                {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">
                                <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>
                        </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.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"
                                                        ? "/manyliondns"
                                                        : "/dnsdetails"
                                                }
                                            >
                                                <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
                                                : ""}
                                            <br />
                                            {_.has(
                                                detailsObj,
                                                "pinswg_siteaddressline1"
                                            )
                                                ? detailsObj.pinswg_siteaddressline2
                                                : ""}
                                            <br />
                                            {_.has(
                                                detailsObj,
                                                "pinswg_siteaddressline1"
                                            )
                                                ? detailsObj.pinswg_siteaddresstown
                                                : ""}
                                            <br />
                                            {_.has(
                                                detailsObj,
                                                "pinswg_siteaddressline1"
                                            )
                                                ? detailsObj.pinswg_siteaddresscounty
                                                : ""}
                                            <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.query(
                                                          transLookup,
                                                          '$..[?(@.value=="' +
                                                              detailsObj[
                                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                              ] +
                                                              '")].value_cy'
                                                      )
                                                    : 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.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
                        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 = (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);
                });
            });
    };

    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]);
    return (
        <>
            <div className="govuk-grid-row">
                <div className="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>
                    <ul className="govuk-list govuk-list--bullet">
                        <li> {t("dnsApplications:page-intro-list-item-1")}</li>

                        <li> {t("dnsApplications:page-intro-list-item-2")}</li>

                        <li> {t("dnsApplications:page-intro-list-item-3")}</li>
                    </ul>
                </div>
            </div>

            {searchResultsObj["@odata.count"] > 5 && (
                <div id="recordCountSelect" className="govuk-grid-row">
                    <div className="govuk-form-group">
                        <label className="govuk-label-s " htmlFor="sort">
                            {t("search:searchresults-show-records-label-a")}
                            <select
                                onChange={(e) => {
                                    setSelectedOption(e.target.value);
                                    setCurrentPage(1);
                                }}
                                value={selectedOption}
                                className="govuk-select"
                                id="showNumberOfRecords"
                                name="showNumberOfRecords"
                            >
                                <option value="5">5</option>
                                <option value="10">10</option>
                                <option value="20">20</option>
                                <option value="30">30</option>
                                <option value="50">50</option>
                            </select>{" "}
                            {t("search:searchresults-show-records-label-b")}
                        </label>
                    </div>
                </div>
            )}
            {resultsArr.length > 0 ? (
                ResultsView(resultsArr)
            ) : (
                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-two-thirds">
                        <h3>{t("search:searchresults-no-records-label")}</h3>
                    </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));
        },
        setCurrentPage: (currentPage) => {
            dispatch(setCurrentPage(currentPage));
        },
    };
};

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