import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { setCurrentReference } from "../../store/currentView/action";
import { connect } from "react-redux";
import jsonpath from "jsonpath";
import _ from "lodash";
import transLookup from "../../data/lookuptranslations.json";

const SearchResults = (props) => {
    const {
        searchString,
        searchResultsObj,
        searchDetailsObj,
        setCurrentReference,
    } = props;
    let { t } = useTranslation();

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

    var resultsArr = searchResultsObj.value || [];

    const ResultsView = (resultsArr) => {
        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 results_wider  ">
                        {t("search:searchresults-case-reference-label")}
                    </dd>
                    <dd className="govuk-summary-list__key govuk-!-font-size-14">
                        {t("search:searchresults-site-address-label")}
                    </dd>
                    <dd className="govuk-summary-list__key govuk-!-font-size-14">
                        {t("search:searchresults-applicant-label")}
                    </dd>
                    <dd className="govuk-summary-list__key govuk-!-font-size-14">
                        {t("search:searchresults-authority-label")}
                    </dd>
                    <dd className="govuk-summary-list__key govuk-!-font-size-14">
                        {t("search:searchresults-case-type-label")}
                    </dd>
                    <dd className="govuk-summary-list__key govuk-!-font-size-14">
                        {t("search:searchresults-status-label")}
                    </dd>
                </div>

                {resultsArr.map((item, key) => {
                    let detailsObj = jsonpath.query(
                        searchDetailsObj,
                        "$..value[?(@.pinswg_name=='" + item.title + "')]"
                    );
                    detailsObj = detailsObj[0];

                    return (
                        <div className="govuk-summary-list__row" key={key}>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14  ">
                                <Link
                                    href={
                                        router.locale == "cy"
                                            ? "/achos"
                                            : "/case"
                                    }
                                >
                                    <a
                                        onClick={() => {
                                            setCurrentReference({
                                                "currentReference": item.title,
                                                "currentType":
                                                    "searchResultsObj",
                                                "incidentid": item.incidentid,
                                            });
                                        }}
                                    >
                                        <span className="results-visually-hidden">
                                            {t(
                                                "search:searchresults-case-reference-label"
                                            )}
                                            :
                                        </span>
                                        {item.title}
                                    </a>
                                </Link>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    {t(
                                        "search:searchresults-site-address-label"
                                    )}
                                    :
                                </span>
                                {_.has(detailsObj, "pinswg_siteaddressline1")
                                    ? detailsObj.pinswg_siteaddressline1
                                    : ""}
                                <br />
                                {_.has(detailsObj, "pinswg_siteaddressline1")
                                    ? detailsObj.pinswg_siteaddressline2
                                    : ""}
                                <br />
                                {_.has(detailsObj, "pinswg_siteaddressline1")
                                    ? detailsObj.pinswg_siteaddresstown
                                    : ""}
                                <br />
                                {_.has(detailsObj, "pinswg_siteaddressline1")
                                    ? detailsObj.pinswg_siteaddresscounty
                                    : ""}
                                <br />
                                {_.has(detailsObj, "pinswg_siteaddressline1")
                                    ? detailsObj.pinswg_siteaddresspostcode
                                    : ""}
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    {t("search:searchresults-applicant-label")}:
                                </span>
                                {_.has(detailsObj, [
                                    "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue",
                                ])
                                    ? detailsObj[
                                          "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
                                      ]
                                    : ""}
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    {t("search:searchresults-authority-label")}:
                                </span>
                                {_.has(item, [
                                    "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue",
                                ])
                                    ? router.locale == "cy"
                                        ? jsonpath.query(
                                              transLookup,
                                              '$..[?(@.value=="' +
                                                  item[
                                                      "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                  ] +
                                                  '")].value_cy'
                                          )
                                        : item[
                                              "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                          ] || "N/A"
                                    : ""}
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    {t("search:searchresults-case-type-label")}:
                                </span>
                                {router.locale == "cy"
                                    ? jsonpath.query(
                                          transLookup,
                                          '$..[?(@.value=="' +
                                              item[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                              ] +
                                              '")].value_cy'
                                      )
                                    : item[
                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                      ] || "N/A"}
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    {t("search:searchresults-status-label")}:
                                </span>

                                {router.locale == "cy"
                                    ? jsonpath.query(
                                          transLookup,
                                          '$..[?(@.value=="' +
                                              item[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
                                              ] +
                                              '")].value_cy'
                                      )
                                    : item[
                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                      ] || "N/A"}
                            </dd>
                        </div>
                    );
                })}
            </dl>
        );
    };

    return (
        <div className="govuk-grid-row">
            <div className="govuk-grid-column-full">
                <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
                    {t("search:searchresults-title-label")}
                </h1>
                <p className="govuk-body">
                    {resultsArr.length > 200
                        ? t("search:searchresults-max-count-label")
                        : t("search:searchresults-count-label", {
                              count: resultsArr.length,
                          })}
                    .
                    {typeof searchString != "undefined" ? (
                        <>
                            <span>
                                {t("search:searchresults-case-count-label")}{" "}
                                {"  "}
                                <em>&quot;{searchString}&quot;</em>
                            </span>
                        </>
                    ) : (
                        ""
                    )}
                </p>

                {resultsArr.length > 0 ? (
                    ResultsView(resultsArr)
                ) : (
                    <div className="govuk-grid-row">
                        <div className="govuk-grid-column-two-thirds">
                            <h3>There are no records</h3>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
};

const mapDispatchToProps = (dispatch) => {
    return {
        setCurrentReference: (currentReference) => {
            dispatch(setCurrentReference(currentReference));
        },
    };
};

export default connect(null, mapDispatchToProps)(SearchResults);