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 [validationError, setValidationError] = useState("");
    const handleParam = (setValue) => (e) => setValue(e.target.value);

    const basicSearch = (event) => {
        event.preventDefault();

        if (query == "" || query == null) {
            setValidationError(true);
        } else {
            setValidationError(false);
            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={
                            validationError
                                ? "govuk-form-group govuk-form-group--error"
                                : "govuk-form-group "
                        }
                    >
                        <div id="basicSearch-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>{" "}
                                CAS-00009-W8N6W4
                            </span>
                        </div>
                        {validationError && (
                            <span
                                id="basicSearch-error"
                                className="govuk-error-message"
                            >
                                <span className="govuk-visually-hidden">
                                    Error:
                                </span>{" "}
                                Case reference is required
                            </span>
                        )}
                        <input
                            className="govuk-input"
                            id="basicSearch"
                            name="basicSearch"
                            type="text"
                            aria-describedby="basicSearch-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>
    );
}