import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import jsonpath from "jsonpath";
import { useState, useEffect, useRef } from "react";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
import transLookup from "../../data/lookuptranslations.json";
import PaginationControl from "./pagination";
import LoadingOverlay from "react-loading-overlay";

import {
    getBasicSearch,
    getBasicSearchDetails,
    getSearchDocumentDetails1,
    getSearchDocumentHistory1,
    getSearchDocumentHistory1Paged,
    getSearchDocumentDetails1Paged,
    getSASToken,
} from "../../actions";

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

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

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

    var documentDetailsArr = documentDetailsObj || [];

    const DocumentView = (documentDetailsArr) => {
        //console.log(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>
                <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 ">
                            {t("case:documents-name-label")}
                        </dd>
                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
                            {t("case:documents-doc-type-label")}
                        </dd>
                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
                            {t("case:documents-date-published-label")}
                        </dd>
                        {/* <dd className="govuk-summary-list__key govuk-!-font-size-16">
                        {t("case:documents-size-label")}
                    </dd> */}
                    </div>

                    {documentDetailsArr.map((item) => {
                        let detailsObj = jsonpath.query(
                            item,
                            "$..[?(@._pinswg_documentids_value=='" +
                                incidentid +
                                "')]"
                        );
                        detailsObj = item;

                        if (typeof detailsObj != "undefined") {
                            var documentHistoryArr = documentHistoryObj || [];
                            return documentHistoryArr.map(
                                (historyItem, key) => {
                                    let historyObj = jsonpath.query(
                                        documentHistoryObj[key],
                                        "$..value[?(@._pinswg_documentid_value=='" +
                                            detailsObj.pinswg_documentid +
                                            "')]"
                                    );

                                    historyObj = historyObj[0];
                                    return !_.isEmpty(historyObj) ? (
                                        <div
                                            className="govuk-summary-list__row"
                                            key={key}
                                        >
                                            <dd className="govuk-summary-list__value govuk-!-font-size-16 ">
                                                <a
                                                    href={
                                                        "/api/proxy/documents/download/" +
                                                        detailsObj.pinswg_isharedocumentreference
                                                    }
                                                >
                                                    <span className="results-visually-hidden">
                                                        {t(
                                                            "case:documents-name-label"
                                                        )}
                                                        :
                                                    </span>
                                                    {_.has(historyObj, [
                                                        "_pinswg_documentid_value@OData.Community.Display.V1.FormattedValue",
                                                    ])
                                                        ? historyObj[
                                                              "_pinswg_documentid_value@OData.Community.Display.V1.FormattedValue"
                                                          ]
                                                        : ""}
                                                </a>
                                            </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.query(
                                                          transLookup,
                                                          '$..[?(@.value=="' +
                                                              detailsObj[
                                                                  "pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
                                                              ] +
                                                              '")].value_cy'
                                                      )
                                                    : 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(historyObj, [
                                                    "pinswg_publisheddate@OData.Community.Display.V1.FormattedValue",
                                                ])
                                                    ? formatDates(
                                                          historyObj[
                                                              "pinswg_publisheddate@OData.Community.Display.V1.FormattedValue"
                                                          ]
                                                      )
                                                    : ""}
                                            </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
                    currentPage={currentPage}
                    searchResultsObj={documentDetailsObj}
                    // spinnerState={spinnerState}
                    getDocumentResults={getDocumentResults}
                />
            </>
        );
    };

    useEffect(() => {
        const docDetailsObj = async () => {
            let docObj = await getSearchDocumentDetails1(incidentid)
                .then((data) => {
                    //console.log(data);
                    setDocumentDetails(data);
                    return data;
                })
                .then((data) => {
                    let historyObj = getDocumentHistory(data.value).then(
                        (result) => {
                            setDocumentHistory(result);
                            setDocumentSearchState(true);

                            return result;
                        }
                    );

                    return data;
                });

            return docObj;
        };

        const getDocumentHistory = async (searchDocumentDetailsObj) => {
            let historyArr = [];
            searchDocumentDetailsObj = searchDocumentDetailsObj || [];

            const detailsObj = searchDocumentDetailsObj.map(
                (historyDetail, index) => {
                    if (historyDetail.pinswg_publishtoweb != true) {
                        console.log(historyDetail.pinswg_documentid);
                    } else {
                        historyArr.push(
                            getSearchDocumentHistory1(
                                historyDetail.pinswg_documentid
                            )
                        );
                    }
                }
            );
            return Promise.all(historyArr);
        };
        const searchDocumentResultsObj = docDetailsObj();
    }, [incidentid, setDocumentHistory, setDocumentDetails]);

    const getDocumentResults = (pageNumber) => {
        //console.log(advancedSearch, searchString, pageNumber);
        getSearchDocumentDetails1Paged(incidentid, pageNumber)
            .then((data) => {
                //console.log(data);
                setDocumentDetails(data);
                return data;
            })
            .then((data) => {
                //console.log("getting details", data);
                return getDocumentHistory(data.value).then((data) => {
                    setDocumentHistory(data);
                    //setShowSpinnerState(false);
                });
            });
    };

    const getDocumentDetails = async () => {
        let docObj = await getSearchDocumentDetails1Paged(
            incidentid,
            pageNumber
        )
            .then((data) => {
                //console.log(data);
                setDocumentDetails(data);
                return data;
            })
            .then((data) => {
                let historyObj = getDocumentHistory(
                    data.value,
                    pageNumber
                ).then((result) => {
                    setDocumentHistory(result);
                    return result;
                });

                return data;
            });

        return docObj;
    };

    const getDocumentHistory = async (searchDocumentDetailsObj, pageNumber) => {
        let historyArr = [];
        searchDocumentDetailsObj = searchDocumentDetailsObj || [];

        const detailsObj = searchDocumentDetailsObj.map(
            (historyDetail, index) => {
                if (historyDetail.pinswg_publishtoweb != true) {
                    console.log(historyDetail.pinswg_documentid);
                } else {
                    historyArr.push(
                        getSearchDocumentHistory1Paged(
                            historyDetail.pinswg_documentid,
                            pageNumber
                        )
                    );
                }
            }
        );
        return Promise.all(historyArr);
    };

    function formatDates(dateObj) {
        var dateObj = new Date(dateObj);
        var dd = String(dateObj.getDate()).padStart(2, "0");
        var mm = String(dateObj.getMonth() + 1).padStart(2, "0"); //January is 0!
        var yyyy = dateObj.getFullYear();

        return dd + "/" + mm + "/" + yyyy;
    }

    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);

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

    const [showDocumentSearchState, setDocumentSearchState] = useState(false);

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

    return (
        <>
            <div>
                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-full">
                        <h2>{t("case:documents-heading-label")}</h2>
                        {_.isEmpty(documentHistoryObj) ? (
                            <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>
            {/* <LoadingOverlay
                active={showSpinnerState}
                spinner
                text={t("common:spinner-searching")}
            /> */}
        </>
    );
};

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

const mapDispatchToProps = (dispatch) => {
    return {
        setDocumentDetails: (detailsObj) => {
            dispatch(setDocumentDetails(detailsObj));
        },
        setDocumentHistory: (historyObj) => {
            dispatch(setDocumentHistory(historyObj));
        },
    };
};

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