import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { connect } from "react-redux";
import { Field, formValueSelector, reduxForm } from "redux-form";

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

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

export const leastOneValue = (values, errorMsg) => (value) =>
    value ? console.log(values) : errorMsg;

const validate = (values) => {
    const errors = {};

    if (values.appellantname) {
        if (
            !(
                values.addressline1 != null ||
                values.town != null ||
                values.county != null ||
                values.postcode != null
            )
        ) {
            errors.appellantname =
                document.documentElement.lang == "cy"
                    ? "Angen rhan o'r cyfeiriad i chwilio gydag enw"
                    : "Need part of the address to search with a name";
        }
    }

    return errors;
};

const RenderTextfield = ({
    id,
    className,
    rows,
    datafieldname,
    name,
    label,
    input,
    hint1,
    hint2,
    hint3,
    meta: { touched, error },
    ...custom
}) => {
    let { t } = useTranslation();

    return (
        <>
            <div className="govuk-form-group">
                <div id="basicSearch-hint" className="govuk-hint ">
                    <label className="govuk-label" htmlFor="caseRef">
                        {label}
                    </label>
                </div>

                <div>
                    <input
                        {...input}
                        className={className}
                        name={name}
                        id={id}
                    />
                    {touched && error && (
                        <span
                            id={id + "-error"}
                            className="govuk-error-message govuk-form-group--error"
                        >
                            <span className="govuk-visually-hidden">
                                Error:
                            </span>{" "}
                            {error}
                        </span>
                    )}
                </div>
            </div>
        </>
    );
};

let AddressSearch = (props) => {
    let { t } = useTranslation();

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

    const {
        LPAData,
        onSubmit,
        handleSubmit,
        myportal,
        error,
        pristine,
        reset,
        submitting,
    } = props;

    const onHandleSubmit = (values) => {
        event.preventDefault();
        //spinnerState();

        var searchString = "";

        searchString +=
            values.appellantname != null
                ? "appellantname=" + values.appellantname + "&"
                : "";

        searchString +=
            values.addressline1 != null
                ? "addressline1=" + values.addressline1.trim() + "&"
                : "";

        searchString += values.town != null ? "town=" + values.town + "&" : "";

        searchString +=
            values.county != null ? "county=" + values.county + "&" : "";

        searchString +=
            values.postcode != null ? "postcode=" + values.postcode + "&" : "";

        searchString = "?" + searchString.slice(0, -1);

        //console.log(searchString);

        router.replace(
            router.locale == "cy"
                ? (myportal == true ? "/fymhorth" : "") +
                      "/canlyniadaucyfeiriadau" +
                      searchString
                : (myportal == true ? "/myportal" : "") +
                      "/addresssearchresults" +
                      searchString
        );
    };

    return (
        <>
            <div>
                <form onSubmit={handleSubmit(onHandleSubmit)}>
                    <div className="govuk-grid-row">
                        <div className="govuk-grid-column-full">
                            <div className="card" id="searchforcase-card">
                                <div className="card-body">
                                    <div className="govuk-body-m ">
                                        <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
                                            <h1 className="govuk-fieldset__heading govuk-heading-m">
                                                {t(
                                                    "search:address-search-title-label"
                                                )}
                                            </h1>
                                        </legend>

                                        <fieldset className="govuk-fieldset">
                                            <Field
                                                validate={[
                                                    minLength(
                                                        t(
                                                            "myportal:searchcases-validation-minlength"
                                                        )
                                                    ),
                                                ]}
                                                className="govuk-input govuk-!-width-two-thirds"
                                                component={RenderTextfield}
                                                id="appellantname"
                                                name="appellantname"
                                                type="text"
                                                aria-describedby="appellantname-hint"
                                                label={t(
                                                    "search:applicant-label"
                                                )}
                                            />

                                            <Field
                                                validate={[
                                                    minLength(
                                                        t(
                                                            "myportal:searchcases-validation-minlength"
                                                        )
                                                    ),
                                                ]}
                                                className="govuk-input govuk-!-width-two-thirds"
                                                component={RenderTextfield}
                                                id="addressline1"
                                                name="addressline1"
                                                type="text"
                                                aria-describedby="addressline1-hint"
                                                label={t(
                                                    "search:address-line-one-label"
                                                )}
                                            />
                                            <Field
                                                validate={[
                                                    minLength(
                                                        t(
                                                            "myportal:searchcases-validation-minlength"
                                                        )
                                                    ),
                                                ]}
                                                className="govuk-input govuk-!-width-two-thirds"
                                                component={RenderTextfield}
                                                id="town"
                                                name="town"
                                                type="text"
                                                aria-describedby="addressline1-hint"
                                                label={t("search:town-label")}
                                            />
                                            <Field
                                                validate={[
                                                    minLength(
                                                        t(
                                                            "myportal:searchcases-validation-minlength"
                                                        )
                                                    ),
                                                ]}
                                                className="govuk-input govuk-!-width-two-thirds"
                                                component={RenderTextfield}
                                                id="county"
                                                name="county"
                                                type="text"
                                                aria-describedby="addressline1-hint"
                                                label={t("search:county-label")}
                                            />
                                            <Field
                                                validate={[
                                                    minLength(
                                                        t(
                                                            "myportal:searchcases-validation-minlength"
                                                        )
                                                    ),
                                                ]}
                                                className="govuk-input govuk-!-width-two-thirds"
                                                component={RenderTextfield}
                                                id="postcode"
                                                name="postcode"
                                                type="text"
                                                aria-describedby="addressline1-hint"
                                                label={t(
                                                    "search:postcode-label"
                                                )}
                                            />
                                        </fieldset>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="govuk-grid-row">
                        <div className="govuk-grid-column-full">
                            <div className="govuk-form-group">
                                <button
                                    type="submit"
                                    name="search"
                                    className="govuk-button"
                                    disabled={pristine}
                                >
                                    {t("common:search-button")}
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </>
    );
};

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

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

const selector = formValueSelector("addressSearchForm"); // <-- same as form name

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(
    reduxForm({
        form: "addressSearchForm",
        destroyOnUnmount: false,
        validate,
    })(AddressSearch)
);