pedwfrontend/components/dns/homepage/titleContent.js

import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import AutoSuggest from "react-autosuggest";

const dnsSites = [
    { id: 1, name: "30MW Energy Plant - Wrexham" },
    { id: 1, name: "Abertillery Wind Farm" },
    { id: 1, name: "Alaw Mon Solar Farm" },
    { id: 1, name: "Alwen Forest - Wind" },
    { id: 1, name: "Blackberry Lane Solar Park" },
    { id: 1, name: "Bretton Hall Solar Farm" },
    { id: 1, name: "Brynllewelyn Farm - Renewable Energy Project" },
    { id: 1, name: "Brynrhyd Solar Farm" },
    { id: 1, name: "Brynwell Farm Renewable Energy Hub" },
    { id: 1, name: "Buttington Quarry - ERF" },
    { id: 1, name: "Coed Darcy - STOR" },
    { id: 1, name: "Coity Road - STOR" },
    { id: 1, name: "Craig Y Perchyll Solar" },
    { id: 1, name: "Egnedol - Sustainable Energy" },
    { id: 1, name: "Elwy Solar Energy" },
    { id: 1, name: "Erebus - Floating Offshore Wind Demonstration Project" },
    { id: 1, name: "Felindre Road - STOR" },
    { id: 1, name: "Gaerwen Wind Farm" },
    { id: 1, name: "Garn Fach Wind Farm" },
    { id: 1, name: "Holyhead Harbour Revision Order" },
    { id: 1, name: "Holyhead Marina Harbour Revision Order" },
    { id: 1, name: "Holyhead Waterfront Regeneration Scheme HRO" },
    { id: 1, name: "Legacy Substation Gas Peaking Plant" },
    { id: 1, name: "Llantarnam - SToR" },
    { id: 1, name: "Llanwern - Solar" },
    { id: 1, name: "Lluest y Gwynt Wind Farm" },
    { id: 1, name: "Llynfi Energy Recovery Facility" },
    { id: 1, name: "Manmoel Wind Farm" },
    { id: 1, name: "Môn Solar Farm" },
    { id: 1, name: "Mor Hafren: Energy Recovery Facility" },
    { id: 1, name: "Mynydd Carn-y-Cefn Wind Farm" },
    { id: 1, name: "Mynydd Llanhilleth Wind Farm" },
    { id: 1, name: "Pancross & Oaklands Solar Farm" },
    { id: 1, name: "Parc Dyffryn Solar Park" },
    { id: 1, name: "Parc Solar Traffwll" },
    { id: 1, name: "Pen March Wind Farm" },
    { id: 1, name: "Pen-y-Fan - Power Plant" },
    { id: 1, name: "Pencaerlan Solar Farm" },
    { id: 1, name: "Penderi Solar Farm" },
    { id: 1, name: "Penpergwm Solar Farm" },
    { id: 1, name: "Pentre Bach Solar Farm" },
    { id: 1, name: "Plas Power Estate Solar Farm" },
    { id: 1, name: "Project Valorous" },
    { id: 1, name: "Rhoscrowther Wind Farm" },
    { id: 1, name: "Rush Wall Solar Park Ltd" },
    { id: 1, name: "Sudbrook - Peaking Gas" },
    { id: 1, name: "TWA - Morlais Demonstration Zone" },
    { id: 1, name: "Twyn Hywel Energy Park" },
    { id: 1, name: "Tycroes Solar" },
    { id: 1, name: "Upper Ogmore - Wind Turbines" },
    { id: 1, name: "Valero - Cogeneration Facility" },
    { id: 1, name: "Vattenfall - Renewable Energy" },
    { id: 1, name: "Wauntysswg - Solar" },
    { id: 1, name: "Wentlooge - renewable energy hub" },
    { id: 1, name: "Y Bryn Wind Farm" },
];

const lowerCasedCompanies = dnsSites.map((company) => {
    return {
        id: company.id,
        name: company.name,
    };
});

const TitleContent = (props) => {
    let { t } = useTranslation();

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

    const [value, setValue] = useState("");
    const [suggestions, setSuggestions] = useState([]);

    function getSuggestions(value) {
        return lowerCasedCompanies.filter((company) =>
            company.name.toLowerCase().includes(value.trim().toLowerCase())
        );
    }

    return (
        <div className="govuk-panel govuk-grid-column-two-thirds govuk-panel--header">
            <h1 className="govuk-panel__title">
                {t("dnsCommon:service-name")}
            </h1>
            <div className="govuk-panel__body">
                <p className="govuk-body-s">{t("dnsHome:title-paragraph")}</p>
            </div>
            <div className="govuk-form-group govuk-!-margin-bottom-0 flex-container">
                <AutoSuggest
                    suggestions={suggestions}
                    onSuggestionsClearRequested={() => setSuggestions([])}
                    onSuggestionsFetchRequested={({ value }) => {
                        console.log(value);
                        setValue(value);
                        setSuggestions(getSuggestions(value));
                    }}
                    onSuggestionSelected={(_, { suggestionValue }) =>
                        console.log("Selected: " + suggestionValue)
                    }
                    getSuggestionValue={(suggestion) => suggestion.name}
                    renderSuggestion={(suggestion) => (
                        <span>{suggestion.name}</span>
                    )}
                    inputProps={{
                        className: "govuk-input govuk-!-font-size-16",
                        placeholder: t(
                            "dnsHome:title-application-search-placeholder"
                        ),
                        value: value,
                        onChange: (_, { newValue, method }) => {
                            setValue(newValue);
                        },
                    }}
                    highlightFirstSuggestion={true}
                />
                <Link href="/dns/application-view">
                    <a className="govuk-button govuk-!-margin-bottom-0 govuk-!-margin-left-2">
                        {t("dnsHome:title-application-search-button")}
                    </a>
                </Link>
            </div>
        </div>
    );
};

export default TitleContent;