import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import jsonpath from "jsonpath";

const DocumentDetails = (props) => {
    let { t } = useTranslation();

    const {
        incidentid,
        caseReference,
        searchResultsObj,
        searchDetailsObj,
        documentDetailsObj,
        documentHistoryObj,
    } = props;

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

    var documentDetailsArr = documentDetailsObj || [];

    console.log(documentDetailsObj);
    console.log(documentDetailsArr);

    const DocumentView = (documentDetailsArr) => {
        return (
            <dl className="govuk-summary-list govuk-!-margin-bottom-9 results">
                <div className="govuk-summary-list__row results-headings">
                    <dd className="govuk-summary-list__key govuk-!-font-size-14 govuk-!-padding-left-2">
                        {t("case:documents-name-label")}
                    </dd>
                    <dd className="govuk-summary-list__key govuk-!-font-size-14">
                        {t("case:documents-doc-type-label")}
                    </dd>
                    <dd className="govuk-summary-list__key govuk-!-font-size-14">
                        {t("case:documents-date-published-label")}
                    </dd>
                    <dd className="govuk-summary-list__key govuk-!-font-size-14">
                        {t("case:documents-size-label")}
                    </dd>
                </div>

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

                    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 +
                                    "')]"
                            );
                            return (
                                <div
                                    className="govuk-summary-list__row"
                                    key={key}
                                >
                                    <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
                                        <Link href="/">
                                            <a>
                                                <span className="results-visually-hidden">
                                                    {t(
                                                        "case:documents-name-label"
                                                    )}
                                                    :
                                                </span>
                                                {_.has(historyObj[key], [
                                                    "_pinswg_documentid_value@OData.Community.Display.V1.FormattedValue",
                                                ])
                                                    ? historyObj[key][
                                                          "_pinswg_documentid_value@OData.Community.Display.V1.FormattedValue"
                                                      ]
                                                    : ""}
                                            </a>
                                        </Link>
                                    </dd>
                                    <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                        <span className="results-visually-hidden">
                                            {t("case:documents-doc-type-label")}
                                            :
                                        </span>
                                        {
                                            detailsObj[
                                                "pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
                                            ]
                                        }
                                    </dd>
                                    <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                        <span className="results-visually-hidden">
                                            {t(
                                                "case:documents-date-published-label"
                                            )}
                                            :
                                        </span>

                                        {_.has(historyObj[key], [
                                            "pinswg_publisheddate@OData.Community.Display.V1.FormattedValue",
                                        ])
                                            ? historyObj[key][
                                                  "pinswg_publisheddate@OData.Community.Display.V1.FormattedValue"
                                              ]
                                            : ""}
                                    </dd>
                                    <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                        <span className="results-visually-hidden">
                                            {t("case:documents-size-label")}:
                                        </span>
                                        92
                                    </dd>
                                </div>
                            );
                        });
                    }
                })}
            </dl>
        );
    };

    return (
        <div>
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <h2>Documents</h2>
                    {console.log(documentDetailsObj)}
                    {documentDetailsArr.length > 0 ? (
                        DocumentView(documentDetailsArr)
                    ) : (
                        <div className="govuk-grid-row">
                            <div className="govuk-grid-column-two-thirds">
                                <h3>There are no documents for this appeal</h3>
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

export default DocumentDetails;