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

const ViewAllResults = (props) => {
    const { searchString, searchResultsObj, currentView, setCurrentReference } =
        props;

    let { t } = useTranslation();

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

    var resultsArr = props[currentView.viewKey][currentView.viewKey].value || [
        {},
    ];
    let resultsRowArr = [];
    Object.keys(resultsArr).map((key, index) => {
        resultsRowArr.push(
            <div className="govuk-summary-list__row" key={key}>
                <dd className="govuk-summary-list__value govuk-!-font-size-16  govuk-!-padding-left-2">
                    <Link href={router.locale == "cy" ? "/achos" : "/case"}>
                        <a
                            onClick={() => {
                                setCurrentReference({
                                    "currentReference":
                                        resultsArr[index].reference,
                                    "currentType": currentView.viewKey,
                                });
                            }}
                        >
                            <span className="results-visually-hidden">
                                Case Reference:
                            </span>
                            {resultsArr[index].ticketnumber}
                        </a>
                    </Link>
                </dd>
                <dd className="govuk-summary-list__value govuk-!-font-size-16">
                    <span className="results-visually-hidden">
                        Site Address:{" "}
                    </span>
                    {resultsArr[index].address1}
                    <br /> {resultsArr[index].town}
                    <br />
                    {resultsArr[index].postcode}
                </dd>
                <dd className="govuk-summary-list__value govuk-!-font-size-16">
                    <span className="results-visually-hidden">
                        Appellant/Applicant:
                    </span>
                    Mr smith
                </dd>
                <dd className="govuk-summary-list__value govuk-!-font-size-16">
                    <span className="results-visually-hidden">Authority:</span>
                    {
                        resultsArr[index][
                            "_customerid_value@OData.Community.Display.V1.FormattedValue"
                        ]
                    }
                </dd>
                <dd className="govuk-summary-list__value govuk-!-font-size-16">
                    <span className="results-visually-hidden">Case Type:</span>
                    {
                        resultsArr[index][
                            "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                        ]
                    }
                </dd>
                <dd className="govuk-summary-list__value govuk-!-font-size-16">
                    <span className="results-visually-hidden">Status:</span>
                    {
                        resultsArr[index][
                            "statuscode@OData.Community.Display.V1.FormattedValue"
                        ]
                    }
                </dd>
            </div>
        );
    });

    return (
        <>
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
                        {currentView.viewName}
                    </h1>

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

                        {resultsRowArr}
                    </dl>
                </div>
            </div>
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <div className="govuk-button-group">
                        <a
                            onClick={() => router.back()}
                            className="govuk-button"
                        >
                            Back
                        </a>
                    </div>
                </div>
            </div>
        </>
    );
};

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

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