import useTranslation from "next-translate/useTranslation";
import Link from "next/link";
import { useRouter } from "next/router";

export default function ViewAllResults(props) {
    const { searchString, searchResultsObj } = props;
    let { t } = useTranslation();

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

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

    return (
        <div className="govuk-grid-row">
            <div className="govuk-grid-column-full">
                <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
                    Your cases
                </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>

                    {resultsArr.map((item, key) => {
                        return (
                            <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"
                                        }
                                    >
                                        <span className="results-visually-hidden">
                                            Case Reference:
                                        </span>
                                        {item.title}
                                    </Link>
                                </dd>
                                <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                    <span className="results-visually-hidden">
                                        Site Address:{" "}
                                    </span>
                                    23 Martineau Lane
                                    <br /> HASTINGS
                                    <br />
                                    TN35 5DS
                                </dd>
                                <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                    <span className="results-visually-hidden">
                                        Appellant/Applicant:
                                    </span>
                                    Mr J Pocknell
                                </dd>
                                <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                    <span className="results-visually-hidden">
                                        Authority:
                                    </span>
                                    {
                                        item[
                                            "_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>
                                    {
                                        item[
                                            "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>
                                    {
                                        item[
                                            "statuscode@OData.Community.Display.V1.FormattedValue"
                                        ]
                                    }
                                </dd>
                            </div>
                        );
                    })}
                </dl>
            </div>
        </div>
    );
}