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

export default function CaseSearch() {
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;
    const [query, setQuery] = useState("");
    const handleParam = (setValue) => (e) => setValue(e.target.value);

    const basicSearch = (event) => {
        event.preventDefault();
        console.log(query);
        // /searchresults

        router.push({
            pathname: "/searchresults",
            query: { q: query },
        });
    };

    return (
        <div className="card" id="casesearch-card">
            <form onSubmit={basicSearch}>
                <div className="card-body">
                    <h3 className="heading-small card-heading">
                        {t("home:casesearch-card-title")}
                    </h3>
                    <div className="govuk-form-group">
                        <div id="event-name-hint" className="govuk-hint ">
                            {t("home:casesearch-card-search-hint")}:
                            <br />
                            <span className="govuk-body-s">
                                {" "}
                                <span className="govuk-!-font-weight-bold">
                                    {t(
                                        "home:casesearch-card-search-example-label"
                                    )}
                                    :
                                </span>{" "}
                                APP/A1234/A/99/1234567
                            </span>
                        </div>
                        <input
                            className="govuk-input"
                            id="event-name"
                            name="event-name"
                            type="text"
                            aria-describedby="event-name-hint"
                            onChange={handleParam(setQuery)}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <button type="submit" className="govuk-button">
                            {t("home:casesearch-card-button")}
                        </button>
                    </div>
                    <Link href="/advancedsearch">
                        <a>{t("home:casesearch-card-advanced-link")}</a>
                    </Link>
                </div>
            </form>
        </div>
    );
}