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

import transLookup from "../../data/lookuptranslations.json";

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;

export const leastOneValue = (errorMsg) => {};

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">
                        {t("search:casereference-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>
        </>
    );
};

const RenderCaseStatusList = ({
    name,
    id,
    input,
    optionsObj,
    meta: { touched, error },
    label,
    errormsg,
}) => {
    let { t } = useTranslation();
    const router = useRouter();
    const { locale } = router;
    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <label className="govuk-label" htmlFor={id}>
                    {label}
                    {name}
                </label>
                {touched && error && (
                    <span id={name + "-error"} className="govuk-error-message">
                        <span className="govuk-visually-hidden">Error:</span>{" "}
                        {errormsg}
                    </span>
                )}
                <div>
                    <select
                        {...input}
                        className="govuk-select"
                        id={id}
                        name={name}
                        //onChange={(e) => props.onChangeSelectAppealType(e)}
                    >
                        <option value="" disabled defaultValue>
                            {t("common:drop-down-select")}
                        </option>
                        {_.isEmpty(optionsObj)
                            ? ""
                            : Object.keys(optionsObj).map((key, index) => {
                                  return (
                                      <option
                                          key={key}
                                          value={
                                              _.isEmpty(optionsObj[key])
                                                  ? ""
                                                  : optionsObj[key].statuscode
                                          }
                                      >
                                          {_.isEmpty(optionsObj[key])
                                              ? ""
                                              : _.isEmpty(optionsObj[key])
                                              ? ""
                                              : _.isEmpty(optionsObj[key].value)
                                              ? ""
                                              : router.locale == "cy"
                                              ? jsonpath({
                                                    path:
                                                        '$..[?(@ && @.statuscode=="' +
                                                        optionsObj[key]
                                                            .statuscode +
                                                        '")].value_cy',
                                                    json: optionsObj,
                                                    eval: true,
                                                })
                                              : optionsObj[key].value ||
                                                t(
                                                    "case:summary-no-date-entered-label"
                                                )}
                                      </option>
                                  );
                              })}
                    </select>
                </div>
            </div>
        </>
    );
};

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

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

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

    const appealOptionsObj =
        props?.appealType?.appealTypeOptions?.value?.length > 0
            ? props.appealType.appealTypeOptions.value
            : [{}];

    const projecttypeOptionsObj =
        props?.appealType?.projectTypeOptions?.value?.length > 0
            ? props.appealType.projectTypeOptions.value
            : [{}];

    const lpaOptionsObj =
        props?.LPAData?.LPAData?.value?.length > 0
            ? props.LPAData.LPAData.value
            : [{}];

    const RenderLPAList = ({
        name,
        id,
        input,
        optionsObj,
        meta: { touched, error },
        label,
        errormsg,
    }) => {
        return (
            <>
                <div
                    className={
                        touched && error
                            ? "govuk-form-group govuk-form-group--error"
                            : "govuk-form-group "
                    }
                >
                    {" "}
                    <label className="govuk-label" htmlFor={id}>
                        {label}
                    </label>
                    {touched && error && (
                        <span
                            id={id + "-error"}
                            className="govuk-error-message"
                        >
                            <span className="govuk-visually-hidden">
                                Error:
                            </span>{" "}
                            {errormsg}
                        </span>
                    )}
                    <div>
                        <select
                            {...input}
                            className="govuk-select govuk-input--error"
                            id={id}
                            name={name}
                            //onChange={(e) => props.onChangeSelectLPA(e)}
                        >
                            <option value="" disabled defaultValue>
                                {t("common:drop-down-select")}
                            </option>
                            {_.isEmpty(optionsObj)
                                ? ""
                                : Object.keys(optionsObj).map((key, index) => {
                                      return (
                                          <option
                                              key={key}
                                              value={optionsObj[key].accountid}
                                          >
                                              {/* {optionsObj[key].name} */}

                                              {router.locale == "cy"
                                                  ? jsonpath({
                                                        path:
                                                            '$..[?(@ && @.value=="' +
                                                            optionsObj[key]
                                                                .name +
                                                            '")].value_cy',
                                                        json: transLookup,
                                                        eval: true,
                                                    })
                                                  : optionsObj[key].name ||
                                                    t(
                                                        "case:summary-no-date-entered-label"
                                                    )}
                                          </option>
                                      );
                                  })}
                        </select>
                    </div>
                </div>
            </>
        );
    };

    const RenderAppealTypeList = ({
        name,
        id,
        input,
        optionsObj,
        meta: { touched, error },
        label,
        errormsg,
    }) => {
        return (
            <>
                <div
                    className={
                        touched && error
                            ? "govuk-form-group govuk-form-group--error"
                            : "govuk-form-group "
                    }
                >
                    <label className="govuk-label" htmlFor={id}>
                        {label}
                        {name}
                    </label>
                    {touched && error && (
                        <span
                            id={name + "-error"}
                            className="govuk-error-message"
                        >
                            <span className="govuk-visually-hidden">
                                Error:
                            </span>{" "}
                            {errormsg}
                        </span>
                    )}
                    <div>
                        <select
                            {...input}
                            className="govuk-select"
                            id={id}
                            name={name}
                            //onChange={(e) => props.onChangeSelectAppealType(e)}
                        >
                            <option value="" disabled defaultValue>
                                {t("common:drop-down-select")}
                            </option>
                            {_.isEmpty(optionsObj)
                                ? ""
                                : Object.keys(optionsObj).map((key, index) => {
                                      return (
                                          <option
                                              key={key}
                                              value={
                                                  _.isEmpty(optionsObj[key])
                                                      ? ""
                                                      : _.isEmpty(
                                                            optionsObj[key]
                                                        )
                                                      ? ""
                                                      : _.isEmpty(
                                                            optionsObj[key]
                                                                .value
                                                        )
                                                      ? ""
                                                      : optionsObj[key]
                                                            .attributevalue +
                                                        "," +
                                                        optionsObj[key].value
                                                            .replace(
                                                                /(\band|[\s\-\+\(\)\,\&])/g,
                                                                ""
                                                            )
                                                            .toLowerCase()
                                              }
                                          >
                                              {_.isEmpty(optionsObj[key])
                                                  ? ""
                                                  : _.isEmpty(optionsObj[key])
                                                  ? ""
                                                  : _.isEmpty(
                                                        optionsObj[key].value
                                                    )
                                                  ? ""
                                                  : router.locale == "cy"
                                                  ? jsonpath({
                                                        path:
                                                            '$..[?(@ && @.value=="' +
                                                            optionsObj[key]
                                                                .value +
                                                            '")].value_cy',
                                                        json: transLookup,
                                                        eval: true,
                                                    })
                                                  : optionsObj[key].value ||
                                                    t(
                                                        "case:summary-no-date-entered-label"
                                                    )}
                                          </option>
                                      );
                                  })}
                        </select>
                    </div>
                </div>
            </>
        );
    };
    const RenderProjectTypeList = ({
        name,
        id,
        input,
        optionsObj,
        meta: { touched, error },
        label,
        errormsg,
    }) => {
        return (
            <>
                <div
                    className={
                        touched && error
                            ? "govuk-form-group govuk-form-group--error"
                            : "govuk-form-group "
                    }
                >
                    <label className="govuk-label" htmlFor={id}>
                        {label}
                        {name}
                    </label>
                    {touched && error && (
                        <span
                            id={name + "-error"}
                            className="govuk-error-message"
                        >
                            <span className="govuk-visually-hidden">
                                Error:
                            </span>{" "}
                            {errormsg}
                        </span>
                    )}
                    <div>
                        <select
                            {...input}
                            className="govuk-select"
                            id={id}
                            name={name}
                            //onChange={(e) => props.onChangeSelectAppealType(e)}
                        >
                            <option value="" disabled defaultValue>
                                {t("common:drop-down-select")}
                            </option>
                            {_.isEmpty(optionsObj)
                                ? ""
                                : Object.keys(optionsObj).map((key, index) => {
                                      return (
                                          <option
                                              key={key}
                                              value={
                                                  _.isEmpty(optionsObj[key])
                                                      ? ""
                                                      : _.isEmpty(
                                                            optionsObj[key]
                                                        )
                                                      ? ""
                                                      : _.isEmpty(
                                                            optionsObj[key]
                                                                .pinswg_sipsprojecttypeid
                                                        )
                                                      ? ""
                                                      : optionsObj[key]
                                                            .pinswg_sipsprojecttypeid +
                                                        "," +
                                                        optionsObj[
                                                            key
                                                        ].pinswg_name
                                                            .replace(
                                                                /(\band|[\s\-\+\(\)\,\&])/g,
                                                                ""
                                                            )
                                                            .toLowerCase()
                                              }
                                          >
                                              {_.isEmpty(optionsObj[key])
                                                  ? ""
                                                  : _.isEmpty(optionsObj[key])
                                                  ? ""
                                                  : _.isEmpty(
                                                        optionsObj[key]
                                                            .pinswg_name
                                                    )
                                                  ? ""
                                                  : router.locale == "cy"
                                                  ? jsonpath(
                                                        '$..[?(@.value=="' +
                                                            optionsObj[key]
                                                                .pinswg_name +
                                                            '")].value_cy',
                                                        transLookup
                                                    )
                                                  : optionsObj[key]
                                                        .pinswg_name ||
                                                    t(
                                                        "case:summary-no-date-entered-label"
                                                    )}
                                          </option>
                                      );
                                  })}
                        </select>
                    </div>
                </div>
            </>
        );
    };

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

    const selectAppealTypesValue = props.formValues?.appealTypes || "";

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

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

        var searchString = "";

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

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

        searchString +=
            values.appealTypes != null
                ? "apt=" + values.appealTypes.split(",")[0] + "&"
                : "";

        searchString +=
            values.statusCode != null
                ? "statuscode=" + values.projecttype + "&"
                : "";

        searchString +=
            values.projecttype != null
                ? "projecttype=" + values.projecttype.split(",")[0] + "&"
                : "";

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

        //console.log(searchString);

        router.replace(
            router.locale == "cy"
                ? (myportal == true ? "/fymhorth" : "") +
                      "/canlyniadauchwiliouwch" +
                      searchString
                : (myportal == true ? "/myportal" : "") +
                      "/advancedsearchresults" +
                      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:search-title-label")}
                                            </h1>
                                        </legend>

                                        <Field
                                            validate={[
                                                minLength(
                                                    t(
                                                        "myportal:searchcases-validation-minlength"
                                                    )
                                                ),
                                            ]}
                                            className="govuk-input govuk-!-width-two-thirds"
                                            component={RenderTextfield}
                                            id="caseRef"
                                            name="caseRef"
                                            type="text"
                                            aria-describedby="caseRef-hint"
                                            hint1={t(
                                                "myportal:searchcases-card-search-hint"
                                            )}
                                            hint2={t(
                                                "myportal:searchcases-card-search-example-label-1"
                                            )}
                                            hint3={t(
                                                "myportal:searchcases-card-search-example-label-2"
                                            )}
                                        />

                                        <Field
                                            name="appealTypes"
                                            id="appealTypes"
                                            component={RenderAppealTypeList}
                                            optionsObj={appealOptionsObj}
                                            // validate={[required]}
                                            label={t("search:appealtype-label")}
                                            errormsg="Appeal type is required"
                                        />

                                        {props.appealTypesValue?.split(
                                            ","
                                        )[0] === "846040002" && (
                                            <Field
                                                name="projecttype"
                                                id="projecttype"
                                                component={
                                                    RenderProjectTypeList
                                                }
                                                optionsObj={
                                                    projecttypeOptionsObj
                                                }
                                                // validate={[required]}
                                                label={t(
                                                    "search:project-type-label"
                                                )}
                                                errormsg="Project type is required"
                                            />
                                        )}
                                        <Field
                                            name="lpaTypes"
                                            id="lpaTypes"
                                            component={RenderLPAList}
                                            optionsObj={lpaOptionsObj}
                                            //validate={[required]}
                                            label={t("search:lpa-label")}
                                            errormsg="Local authority is required"
                                        />

                                        <Field
                                            name="statusCode"
                                            id="statusCode"
                                            component={RenderCaseStatusList}
                                            optionsObj={[
                                                {
                                                    "value": "In Progress",
                                                    "value_cy": "Ar y gweill",
                                                    "statuscode": 1,
                                                },
                                                {
                                                    "value": "On Hold",
                                                    "value_cy": "Ar Dal",
                                                    "statuscode": 2,
                                                },
                                                {
                                                    "value":
                                                        "Waiting for details",
                                                    "value_cy":
                                                        "Aros am fanylion",
                                                    "statuscode": 3,
                                                },
                                                {
                                                    "value": "Researching",
                                                    "value_cy": "Ymchwilio",
                                                    "statuscode": 4,
                                                },
                                                {
                                                    "value": "Case Closed",
                                                    "value_cy": "Achos ar Gau",
                                                    "statuscode": 5,
                                                },
                                                {
                                                    "value": "Cancelled",
                                                    "value_cy": "Wedi'i ganslo",
                                                    "statuscode": 6,
                                                },
                                            ]}
                                            //validate={[required]}
                                            label={t(
                                                "search:case-status-label"
                                            )}
                                            errormsg="Local authority is required"
                                        />
                                        {/* <fieldset className="govuk-fieldset">
                                            <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
                                                <h3 className="govuk-heading-m">
                                                    {t(
                                                        "search:sitelocation-legend"
                                                    )}
                                                </h3>
                                            </legend>
                                            <div className="govuk-form-group">
                                                <label
                                                    className="govuk-label"
                                                    htmlFor="address-line-1"
                                                >
                                                    {t(
                                                        "search:address-line-one-label"
                                                    )}
                                                </label>
                                                <input
                                                    className="govuk-input"
                                                    id="address-line-1"
                                                    name="address-line-1"
                                                    type="text"
                                                    autoComplete="address-line1"
                                                    onChange={handleParam(
                                                        setQuery
                                                    )}
                                                />
                                            </div>

                                            <div className="govuk-form-group">
                                                <label
                                                    className="govuk-label"
                                                    htmlFor="address-town"
                                                >
                                                    {t("search:town-label")}
                                                </label>
                                                <input
                                                    className="govuk-input govuk-!-width-two-thirds"
                                                    id="address-town"
                                                    name="address-town"
                                                    type="text"
                                                    autoComplete="address-level2"
                                                />
                                            </div>

                                            <div className="govuk-form-group">
                                                <label
                                                    className="govuk-label"
                                                    htmlFor="address-county"
                                                >
                                                    {t("search:county-label")}
                                                </label>
                                                <input
                                                    className="govuk-input govuk-!-width-two-thirds"
                                                    id="address-county"
                                                    name="address-county"
                                                    type="text"
                                                />
                                            </div>

                                            <div className="govuk-form-group">
                                                <label
                                                    className="govuk-label"
                                                    htmlFor="address-postcode"
                                                >
                                                    {t("search:postcode-label")}
                                                </label>
                                                <input
                                                    className="govuk-input govuk-input--width-10"
                                                    id="address-postcode"
                                                    name="address-postcode"
                                                    type="text"
                                                    autoComplete="postal-code"
                                                />
                                            </div>
                                        </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("advancedSearchForm"); // <-- same as form name

AdvancedSearch = connect((state) => {
    const appealTypesValue = selector(state, "appealTypes");

    return {
        appealTypesValue,
    };
})(AdvancedSearch);

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