import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { connect } from "react-redux";
import { Field, reduxForm } from "redux-form";
import LoadingOverlay from "react-loading-overlay";

const required = (errorMsg) => (value) =>
    value || typeof value === "number" ? undefined : errorMsg;

export const minLength = (errorMsg) => (value) =>
    value && value.length < 4
        ? errorMsg //`Must be ${min} characters or more`
        : undefined;

const RenderTextfield = ({
    id,
    className,
    rows,
    datafieldname,
    name,
    label,
    input,
    hint1,
    hint2,
    meta: { touched, error },
    ...custom
}) => {
    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <div id="basicSearch-hint" className="govuk-hint ">
                    <span className="govuk-body-m">{hint1}</span>

                    <br />
                    <span className="govuk-body-s">
                        {hint2} CAS-00009-W8N6W4
                    </span>
                </div>
                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
                    {label}
                </label>
                {touched && error && (
                    <span id={id + "-error"} className="govuk-error-message">
                        <span className="govuk-visually-hidden">Error:</span>{" "}
                        {error}
                    </span>
                )}
                <input {...input} className={className} name={name} id={id} />
            </div>
        </>
    );
};

let CaseSearch = (props) => {
    let { t } = useTranslation();
    const { handleSubmit, pristine, reset, submitting } = props;

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

    const [showSpinnerState, setShowSpinnerState] = useState(false);

    let spinnerState = () => {
        showSpinnerState == true
            ? setShowSpinnerState(false)
            : setShowSpinnerState(true);
    };

    const onHandleSubmit = (values) => {
        spinnerState();
        router.replace({
            pathname:
                router.locale == "cy"
                    ? "/canlyniadauchwilio"
                    : "/searchresults",
            query: { q: values.basicSearch },
            shallow: true,
        });
    };

    return (
        <>
            <div className="card" id="casesearch-card">
                <form onSubmit={handleSubmit(onHandleSubmit)}>
                    <div className="card-body">
                        <h3 className="heading-small card-heading">
                            {t("home:casesearch-card-title")}
                        </h3>

                        <Field
                            validate={[
                                required(
                                    t(
                                        "home:casesearch-search-validation-required"
                                    )
                                ),
                                minLength(
                                    t(
                                        "home:casesearch-search-validation-minlength"
                                    )
                                ),
                            ]}
                            className="govuk-input"
                            component={RenderTextfield}
                            id="basicSearch"
                            name="basicSearch"
                            type="text"
                            aria-describedby="basicSearch-hint"
                            hint1={t("home:casesearch-card-search-hint")}
                            hint2={t(
                                "home:casesearch-card-search-example-label"
                            )}
                        />

                        <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>
                <LoadingOverlay
                    active={showSpinnerState}
                    spinner
                    text={t("common:spinner-searching")}
                />
            </div>
        </>
    );
};

const mapStateToProps = (state) => {
    return {
        currentView: state.currentView,
        search: state.search,
        searchResultsObj: state.searchResultsObj,
        formData: state.formData,
        appealType: state.appealType,
        //form: state.form,
        myCases: state.myCases,
        watchedCases: state.watchedCases,
        myRepresentations: state.myRepresentations,
        awaitingSubmission: state.awaitingSubmission,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {};
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(
    reduxForm({
        form: "basicSearchForm",
        destroyOnUnmount: false,
    })(CaseSearch)
);