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

import { consoleLogger } from "../../actions/core/logger";
import { createNewCaseBlob } from "../../actions/services/caseService";
import transLookup from "../../data/lookuptranslations.json";
import {
    setAppealLPA,
    setAppealTypeID,
    setAppealTypeTitle
} from "../../store/appealType/action";
import { getFormCollectionByID, hasOwn } from "../utils";
import Aboutyou from "./aboutyou";
import resolveCrmDisplayValue from "../../lib/i18n/crmDisplay/resolveCrmDisplayValue";

const RenderLPAList = ({
    name,
    input,
    optionsObj,
    meta: { touched, error },
    label,
    errorMsg
}) => {
    let { t } = useTranslation();
    const router = useRouter();

    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                {" "}
                <label className="govuk-label" htmlFor="lpatypes">
                    {label}
                </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 govuk-input--error"
                        id="lpatypes"
                        name="lpatypes"
                    >
                        <option value="" disabled defaultValue>
                            {t("common:drop-down-select")}
                        </option>

                        {Object.keys(optionsObj || {}).map((key) => {
                            const option = optionsObj[key];

                            return (
                                <option
                                    key={key}
                                    value={option?.accountid || ""}
                                >
                                    {option?.name
                                        ? resolveCrmDisplayValue({
                                              value: option.name,
                                              locale: router.locale,
                                              translations: transLookup
                                          })
                                        : ""}
                                </option>
                            );
                        })}
                    </select>
                </div>
            </div>
        </>
    );
};

const RenderAppealTypeList = ({
    name,
    input,
    optionsObj,
    meta: { touched, error },
    label,
    errorMsg
}) => {
    let { t } = useTranslation();
    const router = useRouter();
    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <label className="govuk-label" htmlFor="appealTypes">
                    {label}
                </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="appealTypes"
                        name={name}
                    >
                        <option value="" disabled defaultValue>
                            {t("common:drop-down-select")}
                        </option>

                        {Object.keys(optionsObj || {}).map((key) => {
                            const option = optionsObj[key];

                            return (
                                <option
                                    key={key}
                                    value={
                                        option?.value
                                            ? option.attributevalue
                                            : ""
                                    }
                                >
                                    {option?.value
                                        ? resolveCrmDisplayValue({
                                              value: option.value,
                                              locale: router.locale,
                                              translations: transLookup
                                          })
                                        : ""}
                                </option>
                            );
                        })}
                    </select>
                </div>
            </div>
        </>
    );
};

const RenderRadio = ({
    datafieldname,
    name,
    label,
    id,
    errorMsg,
    options,
    input: { onChange, value },
    meta: { touched, error },
    ...custom
}) => {
    let { t } = useTranslation();
    const required = (value) => (value ? undefined : "Required");
    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <fieldset
                    className="govuk-fieldset"
                    aria-describedby={datafieldname + "-hint"}
                >
                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
                        <label
                            className="govuk-fieldset__heading govuk-body-m"
                            id={id + "_label"}
                        >
                            {label}
                        </label>
                    </legend>
                    {touched && error && (
                        <span
                            id={id + "-error"}
                            className="govuk-error-message"
                        >
                            <span className="govuk-visually-hidden">
                                Error:
                            </span>{" "}
                            {errorMsg}
                        </span>
                    )}
                    <div
                        className={
                            custom.inline == false
                                ? "govuk-radios govuk-radios--small"
                                : "govuk-radios govuk-radios--inline govuk-radios--small"
                        }
                    >
                        {" "}
                        {custom.hint != undefined && (
                            <div className="govuk-hint">{custom.hint}</div>
                        )}
                        {Object.keys(options).map((key, index) => (
                            <div
                                className="govuk-radios__item"
                                data-children-count={key}
                                key={key}
                            >
                                <Field
                                    id={id + "_" + index}
                                    name={id}
                                    component="input"
                                    type="radio"
                                    hint={custom.hint}
                                    className="govuk-radios__input"
                                    value={options[key].split("|")[0]}
                                    validate={[required]}
                                    // checked={
                                    //     value ==
                                    //     parseInt(options[key].split("|")[0])
                                    // }
                                    onChange={(e) => {
                                        let docListObj = custom.documentList;
                                        if (
                                            custom.requiredDocumentValue ==
                                            "Yes"
                                        ) {
                                            e.target.value != "846040000"
                                                ? (docListObj = Object.assign(
                                                      docListObj,
                                                      {
                                                          ["documentCheckList_" +
                                                          id]:
                                                              custom.requiredDocumentLabel
                                                      }
                                                  ))
                                                : delete docListObj[
                                                      "documentCheckList_" + id
                                                  ];
                                            custom.setDocumentsList(docListObj);
                                        }
                                    }}
                                />
                                <label
                                    className="govuk-label govuk-radios__label"
                                    htmlFor={id + "_" + index}
                                >
                                    {t(options[key].split("|")[1])}
                                </label>
                            </div>
                        ))}
                    </div>
                </fieldset>
            </div>
        </>
    );
};

function Radiofield(props) {
    const {
        name,
        label,
        datafieldname,
        parentField,
        form,
        formProps,
        parentFieldShowOnValue,
        validation
    } = props;
    let { t } = useTranslation();
    const router = useRouter();
    const required = (value) => (value ? undefined : "Required");
    //console.log(props.options);

    const fieldOptions = props.options
        .slice(1, props.options.length - 1)
        .split(",");

    var showIfHasParentShowValue = parentField != false;

    (showIfHasParentShowValue == parentField) != false &&
        showIfHasParentShowValue;

    return (
        <>
            {parentField != false ? (
                showIfHasParentShowValue && (
                    <Field
                        name={name}
                        datafieldname={datafieldname}
                        label={label}
                        options={fieldOptions}
                        id={name}
                        validate={[required]}
                        errorMsg={t("newappeal:select-an-option-label")}
                        component={RenderRadio}
                        inline={props.inline}
                        hint={props.hint}
                        //validate={eval(validation)}
                        requiredDocumentLabel={props.requiredDocumentLabel}
                        requiredDocumentValue={props.requiredDocumentValue}
                        setDocumentsList={props.setDocumentsList}
                        documentList={props.documentList}
                    />
                )
            ) : (
                <Field
                    name={name}
                    datafieldname={datafieldname}
                    label={label}
                    options={fieldOptions}
                    id={name}
                    validate={[required]}
                    errorMsg={t("newappeal:select-an-option-label")}
                    component={RenderRadio}
                    inline={props.inline}
                    hint={props.hint}
                    //validate={eval(validation)}
                    requiredDocumentLabel={props.requiredDocumentLabel}
                    requiredDocumentValue={props.requiredDocumentValue}
                    setDocumentsList={props.setDocumentsList}
                    documentList={props.documentList}
                />
            )}
        </>
    );
}

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

    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;
    const isWelsh = router.locale == "cy";

    const { LPAData, onSubmit, handleSubmit, formData } = props;

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

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

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

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

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

        var appTypeCollection = values.appealTypes;
        const selectedAppealType = values.appealTypes;
        const confirmHASCAS = values.confirmHASCAS;

        formStep == 0 && setFormStep(1);

        whichAppealType =
            selectedAppealType == "846040004" && confirmHASCAS == "true"
                ? "846040004"
                : selectedAppealType == "846040004" && confirmHASCAS == "false"
                  ? "846040000"
                  : selectedAppealType;

        var whichAppealType = whichAppealType;

        appTypeCollection = getFormCollectionByID(whichAppealType);

        //console.log(
        //     "/newappeal" +
        //         "/" +
        //         appTypeCollection.UrlName +
        //         "?lpa=" +
        //         values.lpaTypes +
        //         "&apt=" +
        //         whichAppealType +
        //         "&id=" //+
        //     //  data.incidentid
        // );

        delete values.confirmHASCAS;

        // createNewCase(
        //     appTypeCollection.appealTypeID,
        //     values.lpaTypes,
        //     props.loggedInUser,
        //     values,
        //     props.containerID
        // )
        const selectedLpaName = props.LPAData.LPAData.value.filter((obj) => {
            return obj.accountid === values.lpaTypes;
        })[0].name;

        createNewCaseBlob(
            appTypeCollection.appealTypeID,
            values.lpaTypes,
            props.loggedInUser,
            values,
            props.containerID,
            selectedLpaName
        )
            .then((data) => {
                router.replace(
                    "/newappeal" +
                        "/" +
                        appTypeCollection.UrlName +
                        "?lpa=" +
                        values.lpaTypes +
                        "&apt=" +
                        whichAppealType +
                        "&id=" +
                        data.ticketnumber
                );
                return data;
            })
            .catch((error) => {
                consoleLogger(error);
            });
    };
    const yesNo = isWelsh ? ["Ydw", "Na"] : ["Yes", "No"];

    var parentField = "appealTypes",
        formProps = props.whichForm,
        form = "caseForm",
        parentFieldShowOnValue = "846040004";

    const values = formProps[form]?.values;

    const showIfHasParentShowValue =
        parentField !== false &&
        values &&
        hasOwn(values, parentField) &&
        parentFieldShowOnValue.includes(values[parentField].toString());

    (showIfHasParentShowValue == parentField) != false &&
        showIfHasParentShowValue;

    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"
                        )}
                    />

                    <div className="govuk-warning-text">
                        <span
                            className="govuk-warning-text__icon"
                            aria-hidden="true"
                        >
                            !
                        </span>
                        <strong className="govuk-warning-text__text">
                            <span className="govuk-visually-hidden">
                                Warning
                            </span>
                            {t("newappeal:s78-appeals-only-label")}
                            <ul>
                                <li>
                                    {t("newappeal:s78-appeals-only-bullet-one")}
                                </li>
                                <li>
                                    {t("newappeal:s78-appeals-only-bullet-two")}
                                </li>
                            </ul>
                            {t("newappeal:s78-appeals-only-label-a")}
                        </strong>
                    </div>

                    {showIfHasParentShowValue && (
                        <Radiofield
                            name={"confirmHASCAS"}
                            datafieldname={"confirmHASCAS"}
                            label={t("newappeal:hascas-confirmation-label")}
                            hint={t("newappeal:hascas-confirmation-hint")}
                            options="[true|newappeal:yes-option-label,false|newappeal:no-option-label]"
                            id={"confirmHASCAS"}
                            className="govuk-radios__input"
                            validate={"[required]"}
                            errorMsg={t("newappeal:select-an-option-label")}
                        />
                    )}
                    <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)
);