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

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

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

    var resultsArr = searchResultsObj.value || [{}];

    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">
                    {t("search:searchresults-count-label", {
                        count: searchResultsObj["@odata.count"].toString(),
                    })}
                    . You searched for <em>&quot;{searchString}&quot;</em>
                </p>
                <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="/case">
                                        <a
                                            onClick={() => {
                                                setCurrentReference({
                                                    "currentReference":
                                                        item.title,
                                                    "currentType":
                                                        "searchResultsObj",
                                                });
                                            }}
                                        >
                                            <span className="results-visually-hidden">
                                                Case Reference:
                                            </span>
                                            {item.title}
                                        </a>
                                    </Link>
                                </dd>
                                <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                    <span className="results-visually-hidden">
                                        Site Address:{" "}
                                    </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">
                                        Appellant/Applicant:
                                    </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">
                                        Authority:
                                    </span>
                                    {_.has(detailsObj, [
                                        "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue",
                                    ])
                                        ? detailsObj[
                                              "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                          ]
                                        : ""}
                                </dd>
                                <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                    <span className="results-visually-hidden">
                                        Case Type:
                                    </span>
                                    {
                                        item[
                                            "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                        ]
                                    }
                                </dd>
                                <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                    <span className="results-visually-hidden">
                                        Status:
                                    </span>
                                    {
                                        item[
                                            "statuscode@OData.Community.Display.V1.FormattedValue"
                                        ]
                                    }
                                </dd>
                            </div>
                        );
                    })}
                </dl>
            </div>
        </div>
    );
};

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

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