import Link from "next/link";
import { useRouter } from "next/router";
import { useState } from "react";
import useTranslation from "next-translate/useTranslation";
import jsonpath from "jsonpath";
import _ from "lodash";
import transLookup from "../../data/lookuptranslations.json";
import LoadingOverlay from "react-loading-overlay";

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

    const router = useRouter();
    const { locale } = router;
    const {
        caseReference,
        myCases,
        myRepresentations,
        watchedCases,
        awaitingSubmission,
        searchResultsObj,
        searchDetailsObj,
        currentType,
    } = props;

    const noRepresentationLink = ["/case", "/dnsdetails"];

    let setCaseQueryObj = props[currentType];
    let setCaseDetailsObj = props[currentType + "Details"];

    var casesObj = {};

    currentType == "searchResultsObj"
        ? (casesObj = jsonpath.query(
              searchResultsObj,
              '$..[?(@.title=="' + caseReference + '")]'
          ))
        : (casesObj = jsonpath.query(
              setCaseQueryObj,
              '$..[?(@.reference=="' + caseReference + '")]'
          ));

    casesObj = Object.assign({}, ...casesObj);

    var detailsObj = {};

    currentType == "searchResultsObj"
        ? (detailsObj = jsonpath.query(
              searchDetailsObj,
              '$..[?(@.pinswg_name=="' + caseReference + '")]'
          ))
        : (detailsObj = jsonpath.query(
              setCaseDetailsObj,
              '$..[?(@.pinswg_name=="' + caseReference + '")]'
          ));

    detailsObj = detailsObj[0];

    let showDetails = typeof detailsObj != "undefined" ? true : false;

    let showDetailsBlock =
        showDetails == true ? (
            <div>
                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-full">
                        <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
                            {t("case:summary-reference-label")}:{" "}
                            {currentType == "searchResultsObj"
                                ? detailsObj.pinswg_name
                                : casesObj.reference}
                        </h1>

                        <dl className="govuk-summary-list govuk-!-margin-bottom-9">
                            <div className="govuk-summary-list__row">
                                <dt className="govuk-summary-list__key">
                                    {t("case:summary-applicant-label")}
                                </dt>
                                <dd className="govuk-summary-list__value">
                                    {detailsObj[
                                        "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
                                    ] || "not entered"}
                                </dd>
                            </div>
                            {_.has(detailsObj, "pinswg_agentcontactname") ? (
                                <div className="govuk-summary-list__row">
                                    <dt className="govuk-summary-list__key">
                                        {t("case:summary-agent-label")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {_.has(
                                            detailsObj,
                                            "pinswg_agentcontactname"
                                        )
                                            ? detailsObj.pinswg_agentcontactname
                                            : ""}
                                    </dd>
                                </div>
                            ) : (
                                ""
                            )}
                            <div className="govuk-summary-list__row">
                                <dt className="govuk-summary-list__key">
                                    {t("case:summary-site-address-label")}
                                </dt>
                                <dd className="govuk-summary-list__value">
                                    {_.has(
                                        detailsObj,
                                        "pinswg_siteaddressline1"
                                    )
                                        ? detailsObj.pinswg_siteaddressline1
                                        : ""}
                                    <br />
                                    {_.has(
                                        detailsObj,
                                        "pinswg_siteaddressline2"
                                    )
                                        ? detailsObj.pinswg_siteaddressline2
                                        : ""}
                                    <br />
                                    {_.has(detailsObj, "pinswg_siteaddresstown")
                                        ? detailsObj.pinswg_siteaddresstown
                                        : ""}
                                    <br />
                                    {_.has(
                                        detailsObj,
                                        "pinswg_siteaddresscounty"
                                    )
                                        ? detailsObj.pinswg_siteaddresscounty
                                        : ""}
                                    <br />
                                    {_.has(
                                        detailsObj,
                                        "pinswg_siteaddresspostcode"
                                    )
                                        ? detailsObj.pinswg_siteaddresspostcode
                                        : ""}
                                </dd>
                            </div>
                        </dl>
                    </div>
                </div>
                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-full">
                        <div className="govuk-button-group">
                            {noRepresentationLink.includes(router.pathname) ==
                            true ? (
                                ""
                            ) : (
                                <Link href="/representation">
                                    <a className="govuk-button">
                                        {t(
                                            "case:summary-make-representation-label"
                                        )}
                                    </a>
                                </Link>
                            )}

                            <a
                                onClick={() => {
                                    spinnerState();
                                    router.back();
                                }}
                                className="govuk-button govuk-button--secondary"
                            >
                                {t("case:summary-back-button-label")}
                            </a>
                        </div>
                    </div>
                </div>
                <div className="govuk-grid-row">
                    <div className="flex-container grid-row govuk-body case">
                        <div className="card" id="casescomment-card">
                            <div className="card-body">
                                <div className="govuk-grid-column-full">
                                    <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
                                        {t("case:summary-case-details-label")}
                                    </h2>

                                    <dl className="govuk-summary-list govuk-!-font-size-14 govuk-!-margin-bottom-9">
                                        <div className="govuk-summary-list__row">
                                            <dt className="govuk-summary-list__key">
                                                {t(
                                                    "case:summary-case-type-label"
                                                )}
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {router.locale == "cy"
                                                    ? jsonpath.query(
                                                          transLookup,
                                                          '$..[?(@.value=="' +
                                                              casesObj[
                                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                              ] +
                                                              '")].value_cy'
                                                      )
                                                    : casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] ||
                                                      t(
                                                          "case:summary-no-date-entered-label"
                                                      )}
                                            </dd>
                                        </div>
                                        <div className="govuk-summary-list__row">
                                            <dt className="govuk-summary-list__key">
                                                {t("case:summary-lpa-label")}
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {router.locale == "cy"
                                                    ? jsonpath.query(
                                                          transLookup,
                                                          '$..[?(@.value=="' +
                                                              casesObj[
                                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                              ] +
                                                              '")].value_cy'
                                                      )
                                                    : casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] || ""}
                                            </dd>
                                        </div>
                                        <div className="govuk-summary-list__row">
                                            <dt className="govuk-summary-list__key">
                                                {t(
                                                    "case:summary-case-officer-label"
                                                )}
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {" "}
                                                {/* {casesObj.caseDetails.caseOfficer ||
                                                ""} */}
                                                {_.has(
                                                    casesObj,
                                                    "_ownerid_value"
                                                )
                                                    ? casesObj[
                                                          "_ownerid_value@OData.Community.Display.V1.FormattedValue"
                                                      ]
                                                    : ""}
                                            </dd>
                                        </div>
                                        <div className="govuk-summary-list__row">
                                            <dt className="govuk-summary-list__key">
                                                {t(
                                                    "case:summary-procedure-label"
                                                )}
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {router.locale == "cy"
                                                    ? jsonpath.query(
                                                          transLookup,
                                                          '$..[?(@.value=="' +
                                                              detailsObj[
                                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                              ] +
                                                              '")].value_cy'
                                                      )
                                                    : detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] || ""}
                                            </dd>
                                        </div>
                                        <div className="govuk-summary-list__row">
                                            <dt className="govuk-summary-list__key">
                                                {t("case:summary-status-label")}
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {router.locale == "cy"
                                                    ? jsonpath.query(
                                                          transLookup,
                                                          '$..[?(@.value=="' +
                                                              casesObj[
                                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
                                                              ] +
                                                              '")].value_cy'
                                                      )
                                                    : casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] ||
                                                      t(
                                                          "case:summary-no-date-entered-label"
                                                      )}
                                            </dd>
                                        </div>
                                        <div className="govuk-summary-list__row">
                                            <dt className="govuk-summary-list__key">
                                                {t(
                                                    "case:summary-decision-label"
                                                )}
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {router.locale == "cy"
                                                    ? jsonpath.query(
                                                          transLookup,
                                                          '$..[?(@.value=="' +
                                                              detailsObj[
                                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                              ] +
                                                              '")].value_cy'
                                                      )
                                                    : detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] ||
                                                      t(
                                                          "case:summary-no-date-entered-label"
                                                      )}

                                                <br />
                                                {/* <Link href="/">
                                                <a>
                                                    {casesObj.caseDetails
                                                        .outcome_document || ""}
                                                </a>
                                            </Link> */}
                                            </dd>
                                        </div>
                                        <div className="govuk-summary-list__row">
                                            <dt className="govuk-summary-list__key">
                                                {t(
                                                    "case:summary-case-link-status-label"
                                                )}
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {_.has(detailsObj, [
                                                    "pinswg_linkedstatus@OData.Community.Display.V1.FormattedValue",
                                                ])
                                                    ? detailsObj[
                                                          "pinswg_linkedstatus@OData.Community.Display.V1.FormattedValue"
                                                      ]
                                                    : t(
                                                          "case:summary-case-link-status-not-linked"
                                                      )}
                                            </dd>
                                        </div>
                                        <div className="govuk-summary-list__row">
                                            <dt className="govuk-summary-list__key">
                                                {t(
                                                    "case:summary-linked-cases-label"
                                                )}
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {/* {casesObj.caseDetails.linkedCases ||
                                                ""} */}
                                            </dd>
                                        </div>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        <div className="card" id="casescomment-card">
                            <div className="card-body">
                                <div className="govuk-grid-column-full">
                                    <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
                                        {t("case:summary-dates-label")}
                                    </h3>
                                    <dl className="govuk-summary-list govuk-!-font-size-14 govuk-!-margin-bottom-9">
                                        <div className="govuk-summary-list__row">
                                            <dt className="govuk-summary-list__key">
                                                {t(
                                                    "case:summary-start-date-label"
                                                )}
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {_.has(
                                                    detailsObj,
                                                    "pinswg_startdate"
                                                )
                                                    ? !_.isEmpty(
                                                          detailsObj.pinswg_startdate
                                                      )
                                                        ? formatDates(
                                                              detailsObj.pinswg_startdate
                                                          )
                                                        : t(
                                                              "case:summary-no-date-entered-label"
                                                          )
                                                    : t(
                                                          "case:summary-no-date-entered-label"
                                                      )}
                                            </dd>
                                        </div>

                                        <div className="govuk-summary-list__row">
                                            <dt className="govuk-summary-list__key">
                                                {t(
                                                    "case:summary-questionnaire-due-date-label"
                                                )}
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {_.has(
                                                    detailsObj,
                                                    "pinswg_questionnaireduedate"
                                                )
                                                    ? !_.isEmpty(
                                                          detailsObj.pinswg_questionnaireduedate
                                                      )
                                                        ? formatDates(
                                                              detailsObj.pinswg_questionnaireduedate
                                                          )
                                                        : t(
                                                              "case:summary-no-date-entered-label"
                                                          )
                                                    : t(
                                                          "case:summary-no-date-entered-label"
                                                      )}
                                            </dd>
                                        </div>

                                        <div className="govuk-summary-list__row">
                                            <dt className="govuk-summary-list__key">
                                                {t(
                                                    "case:summary-statement-due-date-label"
                                                )}
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {_.has(
                                                    detailsObj,
                                                    "pinswg_statementduedate"
                                                )
                                                    ? !_.isEmpty(
                                                          detailsObj.pinswg_statementduedate
                                                      )
                                                        ? formatDates(
                                                              detailsObj.pinswg_statementduedate
                                                          )
                                                        : t(
                                                              "case:summary-no-date-entered-label"
                                                          )
                                                    : t(
                                                          "case:summary-no-date-entered-label"
                                                      )}
                                            </dd>
                                        </div>

                                        <div className="govuk-summary-list__row">
                                            <dt className="govuk-summary-list__key">
                                                {t(
                                                    "case:summary-interested-party-date-label"
                                                )}
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {_.has(
                                                    detailsObj,
                                                    "pinswg_otherpartiesstatement"
                                                )
                                                    ? !_.isEmpty(
                                                          detailsObj.pinswg_otherpartiesstatement
                                                      )
                                                        ? formatDates(
                                                              detailsObj.pinswg_otherpartiesstatement
                                                          )
                                                        : t(
                                                              "case:summary-no-date-entered-label"
                                                          )
                                                    : t(
                                                          "case:summary-no-date-entered-label"
                                                      )}
                                            </dd>
                                        </div>

                                        <div className="govuk-summary-list__row">
                                            <dt className="govuk-summary-list__key">
                                                {t(
                                                    "case:summary-applicant-final-comments-date-label"
                                                )}
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {_.has(
                                                    detailsObj,
                                                    "pinswg_finalcommentsduedate"
                                                )
                                                    ? !_.isEmpty(
                                                          detailsObj.pinswg_finalcommentsduedate
                                                      )
                                                        ? formatDates(
                                                              detailsObj.pinswg_finalcommentsduedate
                                                          )
                                                        : t(
                                                              "case:summary-no-date-entered-label"
                                                          )
                                                    : t(
                                                          "case:summary-no-date-entered-label"
                                                      )}
                                            </dd>
                                        </div>
                                        <div className="govuk-summary-list__row">
                                            <dt className="govuk-summary-list__key">
                                                {t(
                                                    "case:summary-event-date-label"
                                                )}
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {_.has(
                                                    detailsObj,
                                                    "pinswg_dateeventrequested"
                                                )
                                                    ? !_.isEmpty(
                                                          detailsObj.pinswg_dateeventrequested
                                                      )
                                                        ? formatDates(
                                                              detailsObj.pinswg_dateeventrequested
                                                          )
                                                        : t(
                                                              "case:summary-no-date-entered-label"
                                                          )
                                                    : t(
                                                          "case:summary-no-date-entered-label"
                                                      )}
                                            </dd>
                                        </div>

                                        <div className="govuk-summary-list__row">
                                            <dt className="govuk-summary-list__key">
                                                {t(
                                                    "case:summary-decision-date-label"
                                                )}
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {_.has(
                                                    detailsObj,
                                                    "pinswg_dateoflpadecision"
                                                )
                                                    ? !_.isEmpty(
                                                          detailsObj.pinswg_dateoflpadecision
                                                      )
                                                        ? formatDates(
                                                              detailsObj.pinswg_dateoflpadecision
                                                          )
                                                        : t(
                                                              "case:summary-no-date-entered-label"
                                                          )
                                                    : t(
                                                          "case:summary-no-date-entered-label"
                                                      )}
                                            </dd>
                                        </div>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        ) : (
            <>
                <div>
                    <div className="govuk-grid-row">
                        <div className="govuk-grid-column-full">
                            <h1>Not details currently held</h1>
                        </div>
                    </div>
                </div>
                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-full">
                        <div className="govuk-button-group">
                            {noRepresentationLink.includes(router.pathname) ==
                            true ? (
                                ""
                            ) : (
                                <Link href="/representation">
                                    <a className="govuk-button">
                                        {t(
                                            "case:summary-make-representation-label"
                                        )}
                                    </a>
                                </Link>
                            )}

                            <a
                                onClick={() => {
                                    spinnerState();
                                    router.back();
                                }}
                                className="govuk-button govuk-button--secondary"
                            >
                                {t("case:summary-back-button-label")}
                            </a>
                        </div>
                    </div>
                </div>
            </>
        );

    const [showSpinnerState, setShowSpinnerState] = useState(false);

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

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

    return (
        <>
            {showDetailsBlock}
            <LoadingOverlay
                active={showSpinnerState}
                spinner
                text={t("common:spinner-searching")}
            />{" "}
        </>
    );
};

export default CaseSummary;