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 DNSSearchResults = (props) => {
    const {
        searchString,
        searchResultsObj,
        searchDetailsObj,
        setCurrentReference,
    } = props;
    let { t } = useTranslation();

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

    var resultsArr = searchResultsObj.value || [];

    const ResultsView = (resultsArr) => {
        return (
            <div className="govuk-grid-row govuk-!-margin-top-9">
                <div className="govuk-grid-column-full">
                    <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-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"
                                                    ? "/manyliondns"
                                                    : "/dnsdetails"
                                            }
                                        >
                                            <a
                                                onClick={() => {
                                                    setCurrentReference({
                                                        "currentReference":
                                                            item.title,
                                                        "currentType":
                                                            "searchResultsObj",
                                                    });
                                                }}
                                            >
                                                <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(detailsObj, [
                                            "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue",
                                        ])
                                            ? router.locale == "cy"
                                                ? jsonpath.query(
                                                      transLookup,
                                                      '$..[?(@.value=="' +
                                                          detailsObj[
                                                              "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                          ] +
                                                          '")].value_cy'
                                                  )
                                                : detailsObj[
                                                      "_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-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>
                </div>
            </div>
        );
    };

    return (
        <>
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-two-thirds">
                    <h1 className="govuk-heading-l">
                        {t("dnsCommon:service-name")}{" "}
                        {t("dnsApplications:page-title")}
                    </h1>
                    <p className="govuk-body">
                        {t("dnsApplications:page-intro-paragraph-1")}
                    </p>
                    <ul className="govuk-list govuk-list--bullet">
                        <li> {t("dnsApplications:page-intro-list-item-1")}</li>

                        <li> {t("dnsApplications:page-intro-list-item-2")}</li>

                        <li> {t("dnsApplications:page-intro-list-item-3")}</li>
                    </ul>
                </div>
            </div>
            {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>
            )}
        </>
    );
};

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

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