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

import transLookup from "../../data/lookuptranslations.json";
import {
    setAppealLPA,
    setAppealTypeID,
    setAppealTypeTitle,
} from "../../store/appealType/action";
import { getFormCollectionByID } from "../utils";
import FileUpload from "./fileupload";
import Aboutyou from "./aboutyou";
import { createNewCase } from "../../actions";

let CreateCase = (props) => {
    // useEffect(() => {
    //     window.scrollTo(0, 0);
    // });

    let { t } = useTranslation();

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

    const { LPAData, onSubmit, handleSubmit } = props;

    const appealOptionsObj = _.isEmpty(props)
        ? [{}]
        : _.isEmpty(props.appealType)
        ? [{}]
        : _.isEmpty(props.appealType.appealTypeOptions)
        ? [{}]
        : _.isEmpty(props.appealType.appealTypeOptions.value)
        ? [{}]
        : props.appealType.appealTypeOptions.value;

    let lpaOptionsObj = _.isEmpty(props)
        ? [{}]
        : _.isEmpty(props.LPAData)
        ? [{}]
        : _.isEmpty(props.LPAData.LPAData)
        ? [{}]
        : _.isEmpty(props.LPAData.LPAData)
        ? [{}]
        : props.LPAData.LPAData.value;

    const RenderLPAList = ({
        name,
        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="sort">
                        {label}
                    </label>
                    {touched && error && (
                        <span
                            id="passport-issued-error"
                            className="govuk-error-message"
                        >
                            <span className="govuk-visually-hidden">
                                Error:
                            </span>{" "}
                            {errorMsg}
                        </span>
                    )}
                    <div>
                        <select
                            {...input}
                            className="govuk-select govuk-input--error"
                            id="lpatypes"
                            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}
                                          >
                                              {router.locale == "cy"
                                                  ? jsonpath.query(
                                                        transLookup,
                                                        '$..[?(@.value=="' +
                                                            optionsObj[key]
                                                                .name +
                                                            '")].value_cy'
                                                    )
                                                  : optionsObj[key].name}
                                          </option>
                                      );
                                  })}
                        </select>
                    </div>
                </div>
            </>
        );
    };

    const RenderAppealTypeList = ({
        name,
        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="sort">
                        {label}
                    </label>
                    {touched && error && (
                        <span
                            id="passport-issued-error"
                            className="govuk-error-message"
                        >
                            <span className="govuk-visually-hidden">
                                Error:
                            </span>{" "}
                            {errorMsg}
                        </span>
                    )}
                    <div>
                        <select
                            {...input}
                            className="govuk-select"
                            id="appealTypes"
                            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
                                              }
                                          >
                                              {_.isEmpty(optionsObj[key])
                                                  ? ""
                                                  : _.isEmpty(optionsObj[key])
                                                  ? ""
                                                  : _.isEmpty(
                                                        optionsObj[key].value
                                                    )
                                                  ? ""
                                                  : router.locale == "cy"
                                                  ? jsonpath.query(
                                                        transLookup,
                                                        '$..[?(@.value=="' +
                                                            optionsObj[key]
                                                                .value +
                                                            '")].value_cy'
                                                    )
                                                  : optionsObj[key].value}
                                          </option>
                                      );
                                  })}
                        </select>
                    </div>
                </div>
            </>
        );
    };

    const required = (value) => (value ? undefined : "Required");

    const [formStep, setFormStep] = useState(0);

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

        var appTypeCollection = values.appealTypes;

        appTypeCollection = getFormCollectionByID(appTypeCollection);

        formStep == 0 && setFormStep(1);

        // console.log(values);

        // console.log(props.loggedInUser);

        createNewCase(
            appTypeCollection.appealTypeID,
            values.lpaTypes,
            props.loggedInUser,
            values
        )
            .then((data) => {
                router.replace(
                    "/newappeal" +
                        "/" +
                        appTypeCollection.UrlName +
                        "?lpa=" +
                        values.lpaTypes +
                        "&apt=" +
                        values.appealTypes.split(",")[0] +
                        "&id=" +
                        data.incidentid
                );
                return data;
            })
            .catch(({ err }) => {
                console.log(err);
            });
        // router.replace(
        //     "/newappeal" +
        //         "/" +
        //         appTypeCollection.UrlName +
        //         "?lpa=" +
        //         values.lpaTypes +
        //         "&apt=" +
        //         values.appealTypes.split(",")[0],
        //     null,
        //     {
        //         shallow: true,
        //     }
        // );
    };

    return (
        <>
            {formStep == 0 ? (
                <Aboutyou setFormStep={setFormStep} />
            ) : (
                <form onSubmit={handleSubmit(onHandleSubmit)}>
                    <Field
                        name="lpaTypes"
                        component={RenderLPAList}
                        optionsObj={lpaOptionsObj}
                        validate={[required]}
                        label={t("newappeal:select-lpa-label")}
                        errorMsg={t("newappeal:select-lpa-label-error-msg")}
                    />
                    <Field
                        name="appealTypes"
                        component={RenderAppealTypeList}
                        optionsObj={appealOptionsObj}
                        validate={[required]}
                        label={t("newappeal:select-appeal-type-label")}
                        errorMsg={t(
                            "newappeal:select-appeal-type-label-error-msg"
                        )}
                    />
                    <button
                        type="submit"
                        className="govuk-button"
                        data-module="govuk-button"
                    >
                        {t("common:continue-button")}
                    </button>
                </form>
            )}
        </>
    );
};

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

const mapDispatchToProps = (dispatch) => {
    return {
        onChangeSelectAppealType: (event) => {
            dispatch(
                setAppealTypeTitle(
                    event.target.options[event.target.selectedIndex].text
                )
            );
            dispatch(setAppealTypeID(event.target.value));
        },
        onChangeSelectLPA: (lpaId) => {
            dispatch(setAppealLPA(lpaId));
        },
    };
};

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

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