import { JSONPath as jsonpath } from "jsonpath-plus";
import useTranslation from "next-translate/useTranslation";
import Link from "next/link";
import { useRouter } from "next/router";
import { useCallback, useEffect, useRef, useState } from "react";
import { connect } from "react-redux";
import transLookup from "../../data/lookuptranslations.json";
import { formatDates } from "../utils";
import PaginationControl from "./pagination";

import {
    getSearchDocumentDetails,
    getSearchDocumentDetailsPaged,
    getSearchDocumentTypes,
} from "../../actions";
import { setCurrentPage } from "../../store/currentView/action";

import { setDocumentDetails } from "../../store/searchOutput/action";

const DocumentDetails = (props) => {
    let { t } = useTranslation();
    const firstRender = useRef(false);
    const {
        incidentid,
        caseReference,
        searchResultsObj,
        searchDetailsObj,
        documentDetailsObj,
        setDocumentDetails,
        setCurrentPage,
    } = props;

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

    var documentDetailsArr = documentDetailsObj || [];

    const [selectedOption, setSelectedOption] = useState(10);
    const [documentTypes, setDocumentTypes] = useState([{}]);
    const [selectedDocumentType, setSelectedDocumentType] = useState("all");

    const DocumentView = (documentDetailsArr) => {
        documentDetailsArr = documentDetailsArr.value;

        return (
            <>
                <p>
                    {documentDetailsObj["@odata.count"] > 1
                        ? t("case:documents-count-label-1")
                        : t("case:documents-count-label-1a")}{" "}
                    {documentDetailsObj["@odata.count"]}{" "}
                    {documentDetailsObj["@odata.count"] > 1
                        ? t("case:documents-count-label-2")
                        : t("case:documents-count-label-2a")}
                </p>
                <div className="documentFilters govuk-!-margin-top-5">
                    <div
                        id="recordDocumentTypeSelect"
                        className="govuk-grid-row govuk-!-margin-left-0"
                    >
                        <div className="govuk-form-group">
                            <label
                                className="govuk-label-s "
                                htmlFor="showDocumentType"
                            >
                                {t("case:documents-show-label")}
                                <select
                                    onChange={(e) => {
                                        setSelectedDocumentType(e.target.value);
                                        setCurrentPage(1);
                                    }}
                                    value={selectedDocumentType}
                                    className="govuk-select"
                                    id="showDocumentType"
                                    name="showDocumentType"
                                >
                                    <option value="all">
                                        {router.locale == "cy"
                                            ? jsonpath(
                                                  '$..[?(@.value=="All")].value_cy',
                                                  transLookup
                                              )
                                            : "All"}
                                    </option>
                                    {documentTypes.map((item, key) => {
                                        return (
                                            <option
                                                key={key}
                                                value={
                                                    item.pinswg_isharedocumentlocations
                                                }
                                            >
                                                {router.locale == "cy"
                                                    ? jsonpath(
                                                          '$..[?(@.value=="' +
                                                              item.pinswg_isharedocumentlocationsLabel +
                                                              '")].value_cy',
                                                          transLookup
                                                      )
                                                    : item.pinswg_isharedocumentlocationsLabel ||
                                                      t(
                                                          "case:summary-no-date-entered-label"
                                                      )}
                                            </option>
                                        );
                                    })}
                                </select>
                                {t("case:documents-count-label-2")}
                            </label>
                        </div>
                    </div>
                    {documentDetailsObj["@odata.count"] > 5 && (
                        <div
                            id="recordCountSelect"
                            className="govuk-grid-row govuk-!-margin-left-0"
                        >
                            <div className="govuk-form-group">
                                <label
                                    className="govuk-label-s "
                                    htmlFor="showNumberOfRecords"
                                >
                                    {t(
                                        "search:searchresults-show-records-label-a"
                                    )}
                                    <select
                                        onChange={(e) => {
                                            setSelectedOption(e.target.value);
                                            setCurrentPage(1);
                                        }}
                                        value={selectedOption}
                                        className="govuk-select"
                                        id="showNumberOfRecords"
                                        name="showNumberOfRecords"
                                    >
                                        <option value="5">5</option>
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                        <option value="50">50</option>
                                    </select>{" "}
                                    {t(
                                        "search:searchresults-show-records-label-b"
                                    )}
                                </label>
                            </div>
                        </div>
                    )}
                </div>
                <dl className="documentList 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 ">
                            <button
                                type="button"
                                onClick={() => sortDataBy("pinswg_name")}
                                className={
                                    orderByState == "pinswg_name"
                                        ? 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("case:documents-name-label")}
                            </button>
                        </dd>
                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
                            {/* {t("case:documents-doc-type-label")} */}
                            <button
                                type="button"
                                onClick={() =>
                                    sortDataBy("pinswg_isharedocumentlocations")
                                }
                                className={
                                    orderByState ==
                                    "pinswg_isharedocumentlocations"
                                        ? 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("case:documents-doc-type-label")}
                            </button>
                        </dd>
                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
                            {/* {t("case:documents-date-published-label")} */}
                            <button
                                type="button"
                                onClick={() => sortDataBy("createdon")}
                                className={
                                    orderByState == "createdon"
                                        ? 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("case:documents-date-published-label")}
                            </button>
                        </dd>
                        {/* <dd className="govuk-summary-list__key govuk-!-font-size-16">
                    {t("case:documents-size-label")}
                </dd> */}
                    </div>
                    {showSpinnerState == true ? (
                        <div className="govuk-summary-list__row">
                            <div className="govuk-!-margin-top-4 govuk-!-margin-bottom-4 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>
                    ) : (
                        documentDetailsArr.map((item, key) => {
                            let detailsObj = jsonpath(
                                "$..[?(@._pinswg_documentids_value=='" +
                                    incidentid +
                                    "')]",
                                item
                            );
                            detailsObj = item;
                            return (
                                <div
                                    className="govuk-summary-list__row"
                                    key={key}
                                >
                                    <dd className="govuk-summary-list__value govuk-!-font-size-16 ">
                                        {showDownloadingState === key && (
                                            <div className="coverLoadingLink downloading">
                                                {/* <img
                                                            className="data-loading-icon"
                                                            src="/assets/images/loading.gif"
                                                            alt={
                                                                router.locale ==
                                                                "cy"
                                                                    ? "Nôl data"
                                                                    : "Fetching data"
                                                            }
                                                        /> */}
                                            </div>
                                        )}

                                        <Link
                                            scroll={false}
                                            href={detailsObj.pinswg_hashlink}
                                            key={key}
                                            onClick={() => {
                                                toggleDownLoadLink(key);
                                            }}
                                        >
                                            <span className="results-visually-hidden">
                                                {t("case:documents-name-label")}
                                                :
                                            </span>
                                            {_.has(detailsObj, "pinswg_name")
                                                ? detailsObj.pinswg_name
                                                : ""}
                                        </Link>
                                    </dd>
                                    <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                        <span className="results-visually-hidden">
                                            {t("case:documents-doc-type-label")}
                                            :
                                        </span>

                                        {router.locale == "cy"
                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
                                                      ] +
                                                      '")].value_cy',
                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
                                                  "case:summary-no-date-entered-label"
                                              )}
                                    </dd>
                                    <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                        <span className="results-visually-hidden">
                                            {t(
                                                "case:documents-date-published-label"
                                            )}
                                            :
                                        </span>

                                        {_.has(
                                            detailsObj,
                                            "pinswg_latestpublisheddate"
                                        )
                                            ? formatDates(
                                                  detailsObj.pinswg_latestpublisheddate
                                              )
                                            : ""}
                                    </dd>
                                    {/* <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                    <span className="results-visually-hidden">
                                        {t("case:documents-size-label")}:
                                    </span>
                                    92
                                </dd> */}
                                </div>
                            );
                        })
                    )}
                </dl>
                <PaginationControl
                    showNoOfRecords={selectedOption}
                    currentPage={currentPage}
                    searchResultsObj={documentDetailsObj}
                    spinnerState={spinnerState}
                    orderBy={orderByState}
                    fieldSort={fieldSortState}
                    getDocumentResults={getDocumentResults}
                />
            </>
        );
    };

    const getDocumentTypes = useCallback(() => {
        getSearchDocumentTypes(props.incidentid).then((data) => {
            setDocumentTypes(data);
        });
    }, [props.incidentid]);

    const getDocumentResults = useCallback(
        (pageNumber, orderBy, fieldSort) => {
            getSearchDocumentDetailsPaged(
                props.incidentid,
                pageNumber,
                orderBy,
                fieldSort,
                selectedOption,
                selectedDocumentType
            )
                .then((data) => data)
                .then((data) => {
                    //console.log("getting details", data);
                    setDocumentDetails(data);
                    setShowSpinnerState(false);
                });
        },
        [
            props.incidentid,
            selectedOption,
            selectedDocumentType,
            setDocumentDetails,
        ]
    );

    const getDocumentDetails = async () => {
        let docObj = await getSearchDocumentDetailsPaged(
            incidentid,
            pageNumber,
            orderBy,
            fieldSort
        ).then((data) => {
            //console.log(data);
            setDocumentDetails(data);
            return data;
        });

        return docObj;
    };

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

    let currentPage = 0;

    currentPage = decodeURI(documentDetailsObj["@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 [showSpinnerState, setShowSpinnerState] = useState(false);

    const [showDownloadingState, setShowDownloadingState] = useState(null);

    const toggleDownLoadLink = (i) => {
        setShowDownloadingState(i);

        const downloadTime = setTimeout(hideDownloadCover, 5000);
        downloadTime;
    };

    function hideDownloadCover() {
        setShowDownloadingState(null);
    }

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

    const [showDocumentSearchState, setDocumentSearchState] = useState(false);
    const [orderByState, setOrderbyState] = useState("createdon");
    const [fieldSortState, setfieldSortState] = useState("asc");

    let documentSearchState = () => {
        showDocumentSearchState == true
            ? setDocumentSearchState(false)
            : setDocumentSearchState(true);
    };

    const sortDataBy = (whichField) => {
        setOrderbyState(whichField);
        setfieldSortState("asc");

        getDocumentResults(1, whichField, fieldSortState);
        whichField == orderByState
            ? fieldSortState == "desc"
                ? setfieldSortState("asc")
                : setfieldSortState("desc")
            : setfieldSortState("asc");
        setCurrentPage(1);
        setShowSpinnerState(true);
    };

    useEffect(() => {
        getDocumentTypes();
        if (selectedOption) {
            setShowSpinnerState(true);
            getDocumentResults(1, orderByState, fieldSortState);
        }

        if (selectedDocumentType) {
            setShowSpinnerState(true);
            getDocumentResults(
                1,
                orderByState,
                fieldSortState,
                selectedDocumentType
            );
        }

        const docDetailsObj = async () => {
            let docObj = await getSearchDocumentDetails(incidentid).then(
                (data) => {
                    //console.log(data);
                    setDocumentDetails(data);
                    setDocumentSearchState(true);

                    return data;
                }
            );

            return docObj;
        };

        const searchDocumentResultsObj = docDetailsObj();
    }, [
        incidentid,
        setDocumentDetails,
        selectedOption,
        selectedDocumentType,
        fieldSortState,
        orderByState,
        getDocumentTypes,
        getDocumentResults,
    ]);
    return (
        <>
            <div>
                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-full">
                        <h2>{t("case:documents-heading-label")}</h2>
                        {_.isEmpty(documentDetailsObj.value) ? (
                            <div className="govuk-grid-row">
                                <div className="govuk-grid-column-two-thirds">
                                    <h3>
                                        {showDocumentSearchState == false
                                            ? t("case:documents-checking-label")
                                            : t(
                                                  "case:documents-non-available-label"
                                              )}
                                    </h3>
                                </div>
                            </div>
                        ) : (
                            DocumentView(documentDetailsArr)
                        )}
                    </div>
                </div>
            </div>
        </>
    );
};

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

const mapDispatchToProps = (dispatch) => {
    return {
        setDocumentDetails: (detailsObj) => {
            dispatch(setDocumentDetails(detailsObj));
        },
        setCurrentPage: (currentPage) => {
            dispatch(setCurrentPage(currentPage));
        },
    };
};

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