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, getDocLink } from "../../utils";
import PaginationControl from "../../../components/case/pagination";
import DocumentLink from "../../utils/downloads";
import { useDownloadQueue } from "../../utils/downloadmanager";

import { sendGAEvent } from "@next/third-parties/google";

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

import { setDocumentDetails } from "../../../store/searchOutput/action";
const getDocumentTypes = [
    {
        "Value": 846040009,
        "Label": "Main Party - Pre-Submission Docs"
    },
    {
        "Value": 846040000,
        "Label": "Main Party - Submission Document"
    },
    {
        "Value": 846040001,
        "Label": "Main Party - Questionnaire"
    },
    {
        "Value": 846040002,
        "Label": "Main Party - Statements"
    },
    {
        "Value": 846040003,
        "Label": "Main Party - Comments"
    },
    {
        "Value": 846040004,
        "Label": "Main Party - Written Statements of Evidence"
    },
    {
        "Value": 846040010,
        "Label": "Main Party - Environmental Statements"
    },
    {
        "Value": 846040005,
        "Label": "Interested Party Representations"
    },
    {
        "Value": 846040006,
        "Label": "Correspondence"
    },
    {
        "Value": 846040008,
        "Label": "Inspector Notes"
    },
    {
        "Value": 846040007,
        "Label": "Final Decision/Report"
    },
    {
        "Value": 846040011,
        "Label": "Post Decision Correspondence"
    },
    {
        "Value": 846040012,
        "Label": "High Court Challenge Correspondence"
    },
    {
        "Value": 846040013,
        "Label": "Event - Correspondence"
    },
    {
        "Value": 846040014,
        "Label": "Event - Documents"
    },
    {
        "Value": 846040015,
        "Label": "Pre-Application - General"
    },
    {
        "Value": 846040016,
        "Label": "Pre-Application - EIA Screening"
    },
    {
        "Value": 846040017,
        "Label": "Pre-Application - EIA Scoping"
    },
    {
        "Value": 846040018,
        "Label": "EIA Screening"
    },
    {
        "Value": 846040019,
        "Label": "EIA Scoping"
    },
    {
        "Value": 846040020,
        "Label": "Pre-Application Services Documents"
    },
    {
        "Value": 846040021,
        "Label": "Notification"
    },
    {
        "Value": 846040022,
        "Label":
            "Submission - Environmental Statement - written statement and NTS"
    },
    {
        "Value": 846040023,
        "Label": "Submission - Environmental Statement - Appendices"
    },
    {
        "Value": 846040024,
        "Label": "Submission - Environmental Statement - Figures"
    },
    {
        "Value": 846040025,
        "Label": "Submission - Draft Infrastructure Consent Orders"
    },
    {
        "Value": 846040026,
        "Label": "Submission - Compulsory Acquisition Information"
    },
    {
        "Value": 846040027,
        "Label": "Submission - Application Documents"
    },
    {
        "Value": 846040028,
        "Label": "Examination Notices"
    },
    {
        "Value": 846040029,
        "Label": "Local/Marine Impact Reports"
    },
    {
        "Value": 846040030,
        "Label": "Submission - Further Information"
    },
    {
        "Value": 846040031,
        "Label": "Formal Variation requests"
    },
    {
        "Value": 846040032,
        "Label": "Further Information - Interested Party Representations"
    },
    {
        "Value": 846040033,
        "Label": "Hearing Statements"
    },
    {
        "Value": 846040034,
        "Label": "Events - Recordings"
    },
    {
        "Value": 846040035,
        "Label": "Internal Correspondence"
    },
    {
        "Value": 846040036,
        "Label": "Consultation Response"
    }
];

const getOrigin = [
    {
        "Value": 846040000,
        "Label": "MDU"
    },
    {
        "Value": 846040001,
        "Label": "Portal"
    },
    {
        "Value": 846040002,
        "Label": "Manual"
    }
];

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

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

    var documentDetailsArr = documentDetailsObj || [];
    const { startDownload, getStatus } = useDownloadQueue(3);
    const [selectedOption, setSelectedOption] = useState(10);
    const [selectedWeeks, setSelectedWeeks] = useState(1);
    const [documentTypes, setDocumentTypes] = useState(getDocumentTypes);
    const [documentOrigin, setDocumentOrigin] = useState(getOrigin);
    const [selectedDocumentType, setSelectedDocumentType] = useState("all");
    const [selectedDocumentOrigin, setSelectedDocumentOrigin] = useState("all");
    const [selectAll, setSelectAll] = useState(false);
    const [selectOriginAll, setSelectOriginAll] = useState(false);

    const [checkedItems, setCheckedItems] = useState(
        documentTypes.reduce((acc, item) => {
            acc[item.pinswg_isharedocumentlocations] = false;
            return acc;
        }, {})
    );

    const [checkedOriginItems, setCheckedOriginItems] = useState(
        documentOrigin.reduce((acc, item) => {
            acc[item.pinswg_origin] = false;
            return acc;
        }, {})
    );

    const handleCheckboxChange = (e) => {
        const { name, checked } = e.target;

        setCheckedItems((prev) => ({
            ...prev,
            [name]: checked
        }));
        setSelectAll(false);
    };

    const handleCheckboxOriginChange = (e) => {
        const { name, checked } = e.target;

        setCheckedOriginItems((prev) => ({
            ...prev,
            [name]: checked
        }));
        setSelectOriginAll(false);
    };

    const handleSelectAllChange = (e) => {
        const { checked } = e.target;
        setSelectAll(checked); // Set the 'Select All' state
        if (checked) {
            // If 'Select All' is checked, check all the other checkboxes

            setCheckedItems(
                documentTypes.reduce((acc, item) => {
                    acc[item.pinswg_isharedocumentlocations] = true;
                    return acc;
                }, {})
            );
        } else {
            clearCheckboxes();
        }
    };

    const handleSelectOriginAllChange = (e) => {
        const { checked } = e.target;
        setSelectOriginAll(checked); // Set the 'Select All' state
        if (checked) {
            // If 'Select All' is checked, check all the other checkboxes

            setCheckedOriginItems(
                documentOrigin.reduce((acc, item) => {
                    acc[item.pinswg_origin] = true;
                    return acc;
                }, {})
            );
        } else {
            clearCheckboxes();
        }
    };

    const clearCheckboxes = () => {
        setSelectAll(false);
        setSelectOriginAll(false);
        setCheckedItems(
            documentTypes.reduce((acc, item) => {
                acc[item.pinswg_isharedocumentlocations] = false;
                return acc;
            }, {}),

            setSelectedDocumentType("all"),
            setCurrentPage(1)
        );
        setCheckedOriginItems(
            documentOrigin.reduce((acc, item) => {
                acc["origin_" + item.pinswg_origin] = false;
                return acc;
            }, {}),
            setSelectedDocumentOrigin("all")
        );
    };
    let ShowDocLinks = getDocLink(docsOffline);

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

        return (
            <>
                {ShowDocLinks && (
                    <div className="govuk-warning-text ">
                        <span
                            className="govuk-warning-text__icon"
                            aria-hidden="true"
                        >
                            !
                        </span>
                        <strong className="govuk-warning-text__text govuk-!-margin-top-2">
                            <span className="govuk-visually-hidden">
                                Notice
                            </span>

                            {t("case:documents-not-available-label")}
                        </strong>
                    </div>
                )}

                <div className="docFilteringGroup">
                    <div className="govuk-!-width-one-quarter">
                        {" "}
                        <div className="govuk-form-group filterByGroup">
                            <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>
                                <button onClick={clearCheckboxes}>
                                    {t("search:clear-filter-button-label")}
                                </button>
                            </div>
                            <h4 className="govuk-body govuk-!-font-size-14 govuk-!-margin-bottom-0">
                                Document Type
                            </h4>
                            <div className="govuk-checkboxes govuk-checkboxes--small">
                                {" "}
                                <>
                                    <div className="govuk-checkboxes__item">
                                        <input
                                            className="govuk-checkboxes__input"
                                            type="checkbox"
                                            id={"all_" + "_" + 0}
                                            key={0}
                                            name={"all_" + "_" + 0}
                                            checked={selectAll}
                                            value={"all"}
                                            onChange={handleSelectAllChange}
                                        />
                                        <label
                                            className="govuk-label-s govuk-checkboxes__label"
                                            htmlFor={"all" + "__" + 0}
                                        >
                                            {router.locale == "cy"
                                                ? "Pawb"
                                                : "All"}{" "}
                                        </label>
                                    </div>
                                </>
                                {documentTypes.map((item, key) => {
                                    return (
                                        <div
                                            className="govuk-checkboxes__item"
                                            key={key}
                                        >
                                            <input
                                                className="govuk-checkboxes__input"
                                                type="checkbox"
                                                id={item.Value}
                                                key={key}
                                                value={item.Value}
                                                name={item.Value}
                                                checked={
                                                    checkedItems[item.Value]
                                                }
                                                onChange={handleCheckboxChange}
                                            />
                                            <label
                                                className="govuk-label-s govuk-checkboxes__label"
                                                htmlFor={item.Value}
                                            >
                                                {router.locale == "cy"
                                                    ? jsonpath({
                                                          path:
                                                              '$..[?(@ && @.value=="' +
                                                              item.Label +
                                                              '")].value_cy',
                                                          json: transLookup,
                                                          eval: true
                                                      })
                                                    : item.Label ||
                                                      t(
                                                          "case:summary-no-date-entered-label"
                                                      )}{" "}
                                            </label>
                                        </div>
                                    );
                                })}
                            </div>{" "}
                            <h4 className="govuk-body govuk-!-font-size-14 govuk-!-margin-bottom-0">
                                Document Origin
                            </h4>
                            <div className="govuk-checkboxes govuk-checkboxes_short govuk-checkboxes--small">
                                {" "}
                                <>
                                    <div className="govuk-checkboxes__item">
                                        <input
                                            className="govuk-checkboxes__input"
                                            type="checkbox"
                                            id={"all_" + "_" + 0}
                                            key={0}
                                            name={"all_" + "_" + 0}
                                            checked={selectOriginAll}
                                            value={"all"}
                                            onChange={
                                                handleSelectOriginAllChange
                                            }
                                        />
                                        <label
                                            className="govuk-label-s govuk-checkboxes__label"
                                            htmlFor={"all" + "__" + 0}
                                        >
                                            {router.locale == "cy"
                                                ? "Pawb"
                                                : "All"}{" "}
                                        </label>
                                    </div>
                                </>
                                {documentOrigin.map((item, key) => {
                                    return (
                                        <div
                                            className="govuk-checkboxes__item"
                                            key={key}
                                        >
                                            <input
                                                className="govuk-checkboxes__input"
                                                type="checkbox"
                                                id={"origin_" + item.Value}
                                                key={key}
                                                value={"origin_" + item.Value}
                                                name={"origin_" + item.Value}
                                                checked={
                                                    checkedOriginItems[
                                                        "origin_" + item.Value
                                                    ]
                                                }
                                                onChange={
                                                    handleCheckboxOriginChange
                                                }
                                            />
                                            <label
                                                className="govuk-label-s govuk-checkboxes__label"
                                                htmlFor={"origin_" + item.Value}
                                            >
                                                {router.locale == "cy"
                                                    ? jsonpath({
                                                          path:
                                                              '$..[?(@ && @.value=="' +
                                                              item.Label +
                                                              '")].value_cy',
                                                          json: transLookup,
                                                          eval: true
                                                      })
                                                    : item.Label ||
                                                      t(
                                                          "case:summary-no-date-entered-label"
                                                      )}{" "}
                                            </label>
                                        </div>
                                    );
                                })}
                            </div>{" "}
                            <div>
                                <button
                                    className="govuk-button  "
                                    type="button"
                                    onClick={(e) => {
                                        const checkedValues = [
                                            ...document.querySelectorAll(
                                                ".govuk-checkboxes__input:checked"
                                            )
                                        ].map((e) => e.value);

                                        const origins = checkedValues
                                            .filter((val) =>
                                                val.startsWith("origin_")
                                            )
                                            .map((val) =>
                                                val.replace(/^origin_/, "")
                                            ); // strip prefix

                                        const types = checkedValues.filter(
                                            (val) => !val.startsWith("origin_")
                                        );

                                        setSelectedDocumentType(types);
                                        setSelectedDocumentOrigin(origins);

                                        setCurrentPage(1);
                                    }}
                                >
                                    {t("search:filter-documents-label")}
                                </button>
                            </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>
                        <div>
                            <button
                                onClick={() => {
                                    setShowSpinnerState(true);

                                    getDocumentResults(
                                        1,
                                        orderByState,
                                        fieldSortState
                                    );
                                }}
                            >
                                Refresh Documents
                            </button>
                        </div>
                    </div>
                    <div className="govuk-!-width-two-thirds docResults">
                        {_.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"
                                              )} */}
                                        No documents found
                                    </h3>
                                </div>
                            </div>
                        ) : (
                            <>
                                <dl className=" govuk-summary-list govuk-!-margin-bottom-9 results documentList">
                                    <div className="govuk-summary-list__row results-headings">
                                        <dd className="govuk-summary-list__key govuk-!-font-size-14 ">
                                            <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-14 sortAsc`
                                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-14 sortDesc`
                                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-14`
                                                }
                                            >
                                                {t("case:documents-name-label")}
                                            </button>
                                        </dd>
                                        <dd className="govuk-summary-list__key govuk-!-font-size-14">
                                            {/* {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-14 sortAsc`
                                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-14 sortDesc`
                                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-14`
                                                }
                                            >
                                                {t(
                                                    "case:documents-doc-type-label"
                                                )}
                                            </button>
                                        </dd>
                                        <dd className="govuk-summary-list__key govuk-!-font-size-14">
                                            {/* {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-14 sortAsc`
                                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-14 sortDesc`
                                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-14`
                                                }
                                            >
                                                Uploaded Date
                                            </button>
                                        </dd>
                                        <dd className="govuk-summary-list__key govuk-!-font-size-14">
                                            {/* {t("case:documents-date-published-label")} */}
                                            Case
                                        </dd>
                                        <dd className="govuk-summary-list__key govuk-!-font-size-14">
                                            {/* {t("case:documents-date-published-label")} */}
                                            Origin
                                        </dd>
                                        <dd className="govuk-summary-list__key govuk-!-font-size-14">
                                            {/* {t("case:documents-date-published-label")} */}
                                            Published
                                        </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({
                                                path:
                                                    "$..[?(@ && @._pinswg_documentids_value=='" +
                                                    incidentid +
                                                    "')]",
                                                json: item,
                                                eval: true
                                            });
                                            detailsObj = item;
                                            return (
                                                <div
                                                    className="govuk-summary-list__row"
                                                    key={key}
                                                >
                                                    <dd className="govuk-summary-list__value govuk-!-font-size-14 ">
                                                        {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>
                                                        )}

                                                        {!ShowDocLinks ? (
                                                            detailsObj.pinswg_publishtoweb ? (
                                                                // <Link
                                                                //     scroll={
                                                                //         false
                                                                //     }
                                                                //     href={
                                                                //         detailsObj.pinswg_hashlink
                                                                //     }
                                                                //     key={key}
                                                                //     onClick={() => {
                                                                //         toggleDownLoadLink(
                                                                //             key
                                                                //         ),
                                                                //             sendGAEvent(
                                                                //                 "event",
                                                                //                 "DownloadedFile",
                                                                //                 {
                                                                //                     caseReference:
                                                                //                         props.caseReference,
                                                                //                     filename:
                                                                //                         detailsObj.pinswg_name,
                                                                //                 }
                                                                //             );
                                                                //     }}
                                                                // >
                                                                //     <span className="results-visually-hidden">
                                                                //         {t(
                                                                //             "case:documents-name-label"
                                                                //         )}
                                                                //         :
                                                                //     </span>
                                                                //     {_.has(
                                                                //         detailsObj,
                                                                //         "pinswg_name"
                                                                //     )
                                                                //         ? detailsObj.pinswg_name
                                                                //         : ""}
                                                                // </Link>
                                                                <DocumentLink
                                                                    key={
                                                                        detailsObj.pinswg_documentid
                                                                    }
                                                                    id={
                                                                        detailsObj.pinswg_documentid
                                                                    }
                                                                    detailsObj={
                                                                        detailsObj
                                                                    }
                                                                    caseReference={
                                                                        caseReference
                                                                    }
                                                                    startDownload={
                                                                        startDownload
                                                                    }
                                                                    getStatus={
                                                                        getStatus
                                                                    }
                                                                />
                                                            ) : (
                                                                <>
                                                                    <span className="results-visually-hidden">
                                                                        {t(
                                                                            "case:documents-name-label"
                                                                        )}
                                                                        :
                                                                    </span>
                                                                    {_.has(
                                                                        detailsObj,
                                                                        "pinswg_name"
                                                                    )
                                                                        ? detailsObj.pinswg_name
                                                                        : ""}
                                                                </>
                                                            )
                                                        ) : (
                                                            <>
                                                                <span className="results-visually-hidden">
                                                                    {t(
                                                                        "case:documents-name-label"
                                                                    )}
                                                                    :
                                                                </span>
                                                                {_.has(
                                                                    detailsObj,
                                                                    "pinswg_name"
                                                                )
                                                                    ? detailsObj.pinswg_name
                                                                    : ""}
                                                            </>
                                                        )}
                                                    </dd>
                                                    <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                                        <span className="results-visually-hidden">
                                                            {t(
                                                                "case:documents-doc-type-label"
                                                            )}
                                                            :
                                                        </span>

                                                        {router.locale == "cy"
                                                            ? jsonpath({
                                                                  path:
                                                                      '$..[?(@ && @.value=="' +
                                                                      detailsObj[
                                                                          "pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
                                                                      ] +
                                                                      '")].value_cy',
                                                                  json: transLookup,
                                                                  eval: true
                                                              })
                                                            : 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-14">
                                                        <span className="results-visually-hidden">
                                                            {t(
                                                                "case:documents-date-published-label"
                                                            )}
                                                            :
                                                        </span>

                                                        {_.has(
                                                            detailsObj,
                                                            "createdon"
                                                        )
                                                            ? new Date(
                                                                  detailsObj.createdon
                                                              ).toLocaleString()
                                                            : ""}
                                                    </dd>
                                                    <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                                        {detailsObj.publishtoweb ==
                                                        true ? (
                                                            <Link
                                                                target="_blank"
                                                                rel="noreferrer"
                                                                href={
                                                                    "/case/" +
                                                                    detailsObj.ticketnumber
                                                                }
                                                            >
                                                                {
                                                                    detailsObj[
                                                                        "_pinswg_documentids_value@OData.Community.Display.V1.FormattedValue"
                                                                    ]
                                                                }
                                                            </Link>
                                                        ) : (
                                                            detailsObj[
                                                                "_pinswg_documentids_value@OData.Community.Display.V1.FormattedValue"
                                                            ]
                                                        )}
                                                    </dd>
                                                    <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                                        {
                                                            detailsObj[
                                                                "pinswg_origin@OData.Community.Display.V1.FormattedValue"
                                                            ]
                                                        }
                                                    </dd>
                                                    <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                                        {
                                                            detailsObj[
                                                                "pinswg_publishtoweb@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
                                    showNoOfRecords={selectedOption}
                                    currentPage={currentPage}
                                    searchResultsObj={documentDetailsObj}
                                    spinnerState={spinnerState}
                                    orderBy={orderByState}
                                    fieldSort={fieldSortState}
                                    getDocumentResults={getDocumentResults}
                                />
                            </>
                        )}
                    </div>
                </div>
            </>
        );
    };

    const getDocumentResults = useCallback(
        (pageNumber, orderBy, fieldSort) => {
            getNewDocumentsPaged(
                pageNumber,
                orderBy,
                fieldSort,
                selectedOption,
                selectedDocumentType,
                selectedDocumentOrigin,
                selectedWeeks
            )
                .then((data) => data)
                .then((data) => {
                    setDocumentDetails(data);
                    setShowSpinnerState(false);
                });
        },
        [
            selectedOption,
            selectedDocumentType,
            selectedWeeks,
            selectedDocumentOrigin,
            setDocumentDetails
        ]
    );

    const getDocumentDetails = async () => {
        let docObj = await getSearchDocumentDetailsPaged(
            incidentid,
            pageNumber,
            orderBy,
            fieldSort
        ).then((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("desc");

    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(() => {
        if (selectedOption) {
            setShowSpinnerState(true);
            getDocumentResults(1, orderByState, fieldSortState);
        }

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

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

        const docDetailsObj = async () => {
            let docObj = await getNewDocumentsPaged(
                pageNumber,
                orderBy,
                fieldSort,
                selectedOption,
                selectedDocumentType,
                selectedWeeks
            ).then((data) => {
                setDocumentDetails(data);
                setDocumentSearchState(true);

                return data;
            });

            return docObj;
        };

        //const searchDocumentResultsObj = docDetailsObj();
    }, [
        incidentid,
        setDocumentDetails,
        selectedOption,
        selectedDocumentType,
        fieldSortState,
        orderByState,
        getDocumentResults,
        lang,
        selectedWeeks
    ]);

    function countFieldValue(obj, field, targetValue) {
        let count = 0;

        function traverse(node) {
            if (Array.isArray(node)) {
                node.forEach(traverse);
            } else if (node !== null && typeof node === "object") {
                // If this object has the field, check it
                if (node.hasOwnProperty(field) && node[field] === targetValue) {
                    count++;
                }
                // Keep traversing children
                Object.values(node).forEach(traverse);
            }
        }

        traverse(obj);
        return count;
    }

    return (
        <div className="govuk-grid-row">
            <div className="govuk-grid-column-full">
                <h1 className="">{t("case:documents-heading-label")}</h1>
                {/* <div className="">
                    MDU :{" "}
                    {countFieldValue(
                        documentDetailsObj,
                        "pinswg_origin",
                        846040000
                    )}{" "}
                    / Portal :{" "}
                    {countFieldValue(
                        documentDetailsObj,
                        "pinswg_origin",
                        846040001
                    )}
                </div> */}
                <div id="recordCountSelect" className="">
                    <div className="govuk-form-group">
                        <label
                            className="govuk-label-s "
                            htmlFor="showDocumentsForWeeks"
                        >
                            Documents added with in the last
                            <select
                                onChange={(e) => {
                                    setSelectedWeeks(e.target.value);
                                    setCurrentPage(1);
                                }}
                                value={selectedWeeks}
                                className="govuk-select"
                                id="showDocumentsForWeeks"
                                name="showDocumentsForWeeks"
                            >
                                <option value="0">Today</option>
                                <option value="1">1 day</option>
                                <option value="2">2 days</option>
                                <option value="3">3 days</option>
                                <option value="4">4 days</option>
                                <option value="5">5 days</option>
                                <option value="6">6 days </option>
                                <option value="7">1 week </option>
                                <option value="14">2 weeks </option>
                                <option value="21">3 weeks </option>
                                <option value="28">4 weeks </option>
                                <option value="35">5 weeks </option>
                                <option value="42">6 weeks </option>
                            </select>{" "}
                        </label>
                    </div>
                </div>
                {FilteredDocumentView(documentDetailsArr)}
            </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)(DocumentsTab);