// components/admin/tabs/AppealsTab.js
import useTranslation from "next-translate/useTranslation";
import { useCallback, useState, useEffect } from "react";
import { JSONPath as jsonpath } from "jsonpath-plus";
import Link from "next/link";
import { useRouter } from "next/router";
import PaginationControl from "../../../components/search/pagination";
import { connect } from "react-redux";

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

import { getDetailsProxy, getSearchDetailsPaged } from "../../utils";
import { getAdvancedSearchPaged, getNewAppealsPage } from "../../../actions";
import {
    setCurrentPage,
    setCurrentReference,
} from "../../../store/currentView/action";

function AppealsTab(props) {
    const [searchLoaded, setSearchLoaded] = useState(false);
    const [showSpinnerState, setShowSpinnerState] = useState(false);
    const [selectedOption, setSelectedOption] = useState(10);
    const [orderByState, setOrderbyState] = useState("createdon");
    const [fieldSortState, setfieldSortState] = useState("desc");
    const [loginToWatch, setLoginToWatch] = useState("true");

    const searchDetailsObj = props.searchResultsObj.searchDetailsObj || {};
    const resultsArr = props.searchResultsObj.searchResultsObj.value || [];
    const searchResultsObj = props.searchResultsObj.searchResultsObj;

    const { t } = useTranslation();
    const router = useRouter();
    const myportal = false;
    const advancedSearch = false;
    const searchString = "";

    const spinnerState = () => {
        setShowSpinnerState((prev) => !prev);
    };

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

    let currentPage = 0;
    try {
        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;
    } catch (e) {
        currentPage = pagesCount;
    }

    const getSearchPageResults = useCallback(
        (pageNumber, orderBy, fieldSort) => {
            getNewAppealsPage(
                searchString,
                pageNumber,
                orderBy,
                fieldSort,
                selectedOption
            ).then((data) => {
                props.setSearchResults(data); // ✅ use props, not import
                return getSearchDetailsPaged(data).then((details) => {
                    props.setSearchDetails(details); // ✅ use props, not import
                    setShowSpinnerState(false);
                });
            });
        },
        [
            advancedSearch,
            searchString,
            selectedOption,
            props.setSearchDetails,
            props.setSearchResults,
        ]
    );

    useEffect(() => {
        if (searchLoaded) {
            if (selectedOption) {
                setShowSpinnerState(true);
                getSearchPageResults(1, orderByState, fieldSortState);
            }
        } else {
            setSearchLoaded(true);
        }
    }, [
        selectedOption,
        fieldSortState,
        orderByState,
        searchLoaded,
        getSearchPageResults,
        router.query,
    ]);

    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  ">
                            <button
                                type="button"
                                onClick={() => sortDataBy("title")}
                                className={
                                    orderByState == "title"
                                        ? fieldSortState == "asc"
                                            ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
                                }
                            >
                                {t("search:searchresults-case-reference-label")}
                            </button>
                        </dd>
                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
                            {t("search:searchresults-site-address-label")}
                        </dd>
                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
                            <button
                                type="button"
                                onClick={() => sortDataBy("_customerid_value")}
                                className={
                                    orderByState == "_customerid_value"
                                        ? fieldSortState == "asc"
                                            ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
                                }
                            >
                                {t("search:searchresults-applicant-label")}
                            </button>
                        </dd>
                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
                            <button
                                type="button"
                                onClick={() =>
                                    sortDataBy("_pinswg_associatedlpa_value")
                                }
                                className={
                                    orderByState ==
                                    "_pinswg_associatedlpa_value"
                                        ? fieldSortState == "asc"
                                            ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
                                }
                            >
                                {t("search:searchresults-authority-label")}
                            </button>
                        </dd>
                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
                            <button
                                type="button"
                                onClick={() =>
                                    sortDataBy("pinswg_appealcasetype")
                                }
                                className={
                                    orderByState == "pinswg_appealcasetype"
                                        ? fieldSortState == "asc"
                                            ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
                                }
                            >
                                {t("search:searchresults-case-type-label")}
                            </button>
                        </dd>
                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
                            {/* {t("search:searchresults-status-label")} */}
                            <button
                                type="button"
                                onClick={() => sortDataBy("statuscode")}
                                className={
                                    orderByState == "statuscode"
                                        ? fieldSortState == "asc"
                                            ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
                                }
                            >
                                {t("search:searchresults-status-label")}
                            </button>
                        </dd>

                        <dd className="govuk-summary-list__key govuk-!-font-size-16 govuk-summary-list__action">
                            Origin
                        </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:
                                    '$..value[?(@ && @.ticketnumber=="' +
                                    item.ticketnumber +
                                    '")]',
                                json: searchDetailsObj,
                                eval: true,
                            });

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

                                        <br />
                                        {new Date(
                                            item.createdon
                                        ).toLocaleString()}
                                    </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]
                                                : ""
                                            : ""}
                                        {_.has(
                                            detailsObj,
                                            "pinswg_siteaddressline1"
                                        )
                                            ? detailsObj.pinswg_siteaddressline1
                                            : ""}

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

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

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

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

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

                                        {router.locale == "cy"
                                            ? jsonpath({
                                                  path:
                                                      '$..[?(@ && @.value=="' +
                                                      item[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
                                                      '")].value_cy',
                                                  json: transLookup,
                                                  eval: true,
                                              })
                                            : item[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
                                              ] || "N/A"}
                                    </dd>
                                    <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                        {item[
                                            "caseorigincode@OData.Community.Display.V1.FormattedValue"
                                        ] || "N/A"}
                                    </dd>
                                </div>
                            );
                        })
                    )}
                </dl>
                <PaginationControl
                    showNoOfRecords={selectedOption}
                    currentPage={currentPage}
                    searchResultsObj={props.searchResultsObj.searchResultsObj}
                    orderBy={orderByState}
                    fieldSort={fieldSortState}
                    spinnerState={spinnerState}
                    getSearchPageResults={getSearchPageResults}
                />
            </>
        );
    };

    return (
        <div>
            <h1>Appeals</h1>
            {searchResultsObj["@odata.count"] > 5 && (
                <div id="recordCountSelect" className="">
                    <div className="govuk-form-group">
                        <label
                            className="govuk-label-s "
                            htmlFor="showNumberOfRecords"
                        >
                            {t("search:searchresults-show-records-label-a")}
                            <select
                                onChange={(e) => {
                                    setSelectedOption(e.target.value);
                                    props.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>
            )}
        </div>
    );
}

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

const mapStateToProps = (state) => {
    return {
        searchResultsObj: state.searchResultsObj,
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(AppealsTab);