import { JSONPath as jsonpath } from "jsonpath-plus";
import _ from "lodash";
import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { useDropzone } from "react-dropzone";
import { connect } from "react-redux";
import { Field, change, formValueSelector, reduxForm } from "redux-form";
import { useState, useEffect } from "react";

import {
    FileUploadField,
    RenderMultiline,
    shouldDisableButton
} from "./representationElements";
import RepresentationTypeSelectorBlock from "./elements/RepresentationTypeSelectorBlock";
import RepresentationProgress_enforcement from "./representationProgress/representationProgress_enforcement";
import RepresentationProgress_s78 from "./representationProgress/representationProgress_s78";
import Enforcement_Questionnaire from "./representationQuestionnaires/representationLPAQuestionnaire_enforcement";
import S78_Questionnaire from "./representationQuestionnaires/representationLPAQuestionnaire_s78";

import {
    setRepresentationCapacity,
    setRepresentationSubmit,
    setFilesForRepresentations,
    setCurrentPage,
    setCurrentReference
} from "../../../store/currentView/action";

let RepLPA = (props) => {
    let { t } = useTranslation();
    const router = useRouter();
    const { locale } = router;
    const {
        onSubmit,
        handleSubmit,
        formObj,
        appellantApplicantRepresentationArr,
        setRepresentationCapacity,
        setRepresentationSubmit,
        currentView,
        procedureTypeValue,
        onBehalfOfLPA,
        setShowQuestionnaireSection,
        showQuestionnaireSection,
        questionnaireCount,
        setQuestionnaireCount,
        setRepFileName,
        updateRepresentation,
        setSavingStatus,
        savingStatus,
        setFilesForRepresentations,
        onRepresentationTypeChange,
        onTypeSelectionConfirmed
    } = props;
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();

    const files = acceptedFiles.map((file) => (
        <li key={file.path}>
            {file.path} - {file.size} bytes
        </li>
    ));
    const required = (value) => (value ? undefined : "Required");

    const persistedRepresentationType =
        currentView?.caseReference?.repDetails?.representationType;
    const [typeSelectionConfirmed, setTypeSelectionConfirmed] = useState(
        !!persistedRepresentationType
    );

    useEffect(() => {
        if (persistedRepresentationType) {
            setTypeSelectionConfirmed(true);
        }
    }, [persistedRepresentationType]);

    const selectedRepresentationType =
        formObj?.representationForm?.values?.representationType ||
        props.representationType;

    const isTypeConfirmed =
        !!selectedRepresentationType && typeSelectionConfirmed;

    const selectedRepresentationTypeDisplay =
        router.locale == "cy"
            ? selectedRepresentationType == "Questionnaire"
                ? "Holiadur"
                : selectedRepresentationType == "Statement"
                  ? "Datganiad"
                  : selectedRepresentationType == "Final comments"
                    ? "Sylwadau terfynol"
                    : selectedRepresentationType
            : selectedRepresentationType;

    const whichQuestionnaire = () => {
        {
            switch (currentView.caseReference.appealType) {
                case 846040000:
                case 846040001:
                case 846040025:
                case 846040004:
                case 846040018:
                case 846040003:
                case 846040009:
                case 846040008:
                case 846040010:
                case 846040017:
                    return (
                        <S78_Questionnaire
                            questionnaireType={"s78"}
                            props={props}
                            containerID={
                                props.props.props.accountDetails.containerID
                            }
                            currentView={currentView}
                            showQuestionnaireSection={showQuestionnaireSection}
                            setShowQuestionnaireSection={
                                setShowQuestionnaireSection
                            }
                            questionnaireCount={questionnaireCount}
                            setRepresentationSubmit={setRepresentationSubmit}
                        />
                    );
                    break;

                case 846040005:
                case 846040006:
                case 846040007:
                    return (
                        <Enforcement_Questionnaire
                            questionnaireType={"enf"}
                            props={props}
                            containerID={
                                props.props.props.accountDetails.containerID
                            }
                            currentView={currentView}
                            showQuestionnaireSection={showQuestionnaireSection}
                            setShowQuestionnaireSection={
                                setShowQuestionnaireSection
                            }
                            questionnaireCount={questionnaireCount}
                            setRepresentationSubmit={setRepresentationSubmit}
                        />
                    );
                    break;
                default:
                    return <></>;
                    break;
            }
        }
    };

    const whichProgress = () => {
        {
            switch (currentView.caseReference.appealType) {
                case 846040000:
                case 846040001:
                case 846040025:
                case 846040004:
                case 846040018:
                case 846040003:
                case 846040009:
                case 846040008:
                case 846040010:
                case 846040017:
                    return (
                        <RepresentationProgress_s78
                            props={props}
                            containerID={
                                props.props.props.accountDetails.containerID
                            }
                            currentView={currentView}
                            showQuestionnaireSection={showQuestionnaireSection}
                            setShowQuestionnaireSection={
                                setShowQuestionnaireSection
                            }
                        />
                    );
                    break;

                case 846040005:
                case 846040006:
                case 846040007:
                    return (
                        <RepresentationProgress_enforcement
                            props={props}
                            containerID={
                                props.props.props.accountDetails.containerID
                            }
                            currentView={currentView}
                            showQuestionnaireSection={showQuestionnaireSection}
                            setShowQuestionnaireSection={
                                setShowQuestionnaireSection
                            }
                        />
                    );
                    break;
                default:
                    return <></>;
                    break;
            }
        }
    };

    let setCaseDetailsObj = router.query.hasOwnProperty("state")
        ? router.query.state == "edit"
            ? props.props.myRepresentations.myRepresentations
            : props.props.searchResultsObj.searchDetailsObj
        : props.props.searchResultsObj.searchDetailsObj;

    var detailsObj = {};

    detailsObj = jsonpath({
        path:
            '$..[?(@ && @.pinswg_name=="' +
            currentView.caseReference.currentReference +
            '")]',
        json: setCaseDetailsObj,
        eval: true
    });

    let setCaseResultssObj = router.query.hasOwnProperty("state")
        ? router.query.state == "edit"
            ? props.props.myRepresentations.myRepresentations
            : props.props.searchResultsObj.searchResultsObj
        : props.props.searchResultsObj.searchResultsObj;

    detailsObj = detailsObj[0];

    var resultsObj = {};

    resultsObj = jsonpath({
        path:
            '$..[?@ && @.pinswg_name=="' +
            currentView.caseReference.currentReference +
            '")]',
        json: setCaseResultssObj,
        eval: true
    });
    resultsObj = resultsObj[0];

    props.formObj.hasOwnProperty("representationForm") &&
        props.formObj["representationForm"].hasOwnProperty("values") &&
        props.formObj["representationForm"].values.hasOwnProperty(
            "representationCapacity"
        ) &&
        props.formObj["representationForm"].values.hasOwnProperty(
            "representationType"
        ) &&
        setRepFileName(props.formObj["representationForm"].values);

    let filesListObj =
        props.formObj.hasOwnProperty("representationForm") &&
        props.formObj["representationForm"].hasOwnProperty("values") &&
        props.formObj["representationForm"].values.hasOwnProperty("filesList")
            ? props.formObj["representationForm"].values.filesList
            : {};

    return (
        <>
            <RepresentationTypeSelectorBlock
                t={t}
                headingText={t(
                    "myrepresentations:representation-from-an-lpa-heading"
                )}
                kindLabelText={t("myrepresentations:kind-of-rep-label")}
                isTypeSelected={isTypeConfirmed}
                selectedTypeDisplay={selectedRepresentationTypeDisplay}
                representationType={selectedRepresentationType}
                setTypeSelectionConfirmed={setTypeSelectionConfirmed}
                onRepresentationTypeChange={onRepresentationTypeChange}
                onTypeSelectionConfirmed={onTypeSelectionConfirmed}
                optionsArr={appellantApplicantRepresentationArr}
                validate={[required]}
                errorMsg={t("myrepresentations:select-an-option-label")}
            />
            <div className="govuk-grid-row">
                <div className="govuk-form-group">
                    {isTypeConfirmed &&
                        (selectedRepresentationType != "Questionnaire" ? (
                            <>
                                <p className="govuk-body">
                                    {t("myrepresentations:enter-comment-label")}
                                </p>
                                <fieldset
                                    className="govuk-fieldset"
                                    aria-describedby="commentBox-hint"
                                >
                                    {/* <div
                                        id="commentBox-hint"
                                        className="govuk-hint"
                                    >
                                        {t(
                                            "myrepresentations:comments-set-out-label"
                                        )}
                                        :
                                    </div> */}
                                    <div className="govuk-form-group">
                                        <Field
                                            name="representationComments"
                                            id="representationComments"
                                            component={RenderMultiline}
                                            type="text"
                                            rows="5"
                                            className="govuk-textarea govuk-input--width-30"
                                            aria-describedby={
                                                props.name + "-hint"
                                            }
                                        />
                                    </div>
                                </fieldset>
                                <fieldset
                                    className="govuk-fieldset govuk-!-margin-top-9"
                                    aria-describedby="commentBox-hint"
                                >
                                    {" "}
                                    <div className="govuk-form-group govuk-!-margin-bottom-9">
                                        {console.log(
                                            "--------",
                                            props.formObj.hasOwnProperty(
                                                "representationForm"
                                            ) &&
                                                props.formObj[
                                                    "representationForm"
                                                ].hasOwnProperty("values") &&
                                                props.formObj[
                                                    "representationForm"
                                                ].values.hasOwnProperty(
                                                    "filesList"
                                                )
                                                ? props.props.props.form[
                                                      "representationForm"
                                                  ].values.filesList
                                                : ""
                                        )}
                                        {/* {props.formObj.hasOwnProperty(
                                            "representationForm"
                                        ) &&
                                            props.formObj[
                                                "representationForm"
                                            ].hasOwnProperty("values") &&
                                            props.formObj[
                                                "representationForm"
                                            ].values.hasOwnProperty(
                                                "filesList"
                                            ) && ( */}
                                        <FileUploadField
                                            name={"representationDocuments"}
                                            id={"representationDocuments"}
                                            label={t(
                                                "myrepresentations:add-files-label"
                                            )}
                                            ticketnumber={
                                                props.currentView.caseReference
                                                    .ticketnumber
                                            }
                                            hint={"sdsd"}
                                            fileList={
                                                props.currentView.fileList
                                                // (props.formObj.hasOwnProperty(
                                                //     "representationForm"
                                                // ) &&
                                                //     props.formObj[
                                                //         "representationForm"
                                                //     ].hasOwnProperty(
                                                //         "values"
                                                //     ) &&
                                                //     props.formObj[
                                                //         "representationForm"
                                                //     ].values.hasOwnProperty(
                                                //         "filesList"
                                                //     ) &&
                                                //     props.props.props.form[
                                                //         "representationForm"
                                                //     ].values.filesList) ||
                                                // []
                                            }
                                            setFilesForRepresentations={
                                                setFilesForRepresentations
                                            }
                                            containerID={
                                                props.props.props.accountDetails
                                                    .containerID
                                            }
                                            filenamePrefix={props.formObj}
                                            props={props.props.props}
                                            setCurrentReference={
                                                props.setCurrentReference
                                            }
                                        />
                                        {/* // )} */}
                                    </div>
                                </fieldset>
                            </>
                        ) : (
                            whichQuestionnaire()
                        ))}
                </div>{" "}
            </div>
            <div className="govuk-grid-row">
                <div className="govuk-button-group">
                    {isTypeConfirmed &&
                        selectedRepresentationType == "Questionnaire" && (
                            <>
                                {showQuestionnaireSection <
                                    questionnaireCount && (
                                    <button
                                        type="submit"
                                        className="govuk-button"
                                        data-module="govuk-button"
                                    >
                                        {t("common:continue-button")}
                                    </button>
                                    // <a
                                    //     href="#"
                                    //     onClick={() => {
                                    //         setShowQuestionnaireSection(
                                    //             showQuestionnaireSection + 1
                                    //         );
                                    //     }}
                                    //     className="govuk-button"
                                    // >
                                    //     Next section
                                    // </a>
                                )}
                                {showQuestionnaireSection ==
                                    questionnaireCount && (
                                    <button
                                        type="submit"
                                        className="govuk-button"
                                        data-module="govuk-button"
                                    >
                                        {t("common:continue-button")}
                                    </button>
                                )}
                                {showQuestionnaireSection > 1 && (
                                    <a
                                        onClick={() => {
                                            // window.scrollTo({
                                            //     top: 0,
                                            //     behavior: "smooth",
                                            // });
                                            (setRepFileName(
                                                props.formObj[
                                                    "representationForm"
                                                ].values
                                            ),
                                                setShowQuestionnaireSection(
                                                    showQuestionnaireSection - 1
                                                ));
                                        }}
                                        className="govuk-link"
                                    >
                                        Back
                                    </a>
                                )}
                                {savingStatus ? (
                                    <span className=" progress-save-active">
                                        {router.locale == "cy"
                                            ? "Nôl data"
                                            : "Saving data"}
                                        <img
                                            className="data-loading-icon"
                                            src="/assets/images/loading.gif"
                                            alt={
                                                router.locale == "cy"
                                                    ? "Nôl data"
                                                    : "Saving data"
                                            }
                                        />
                                    </span>
                                ) : (
                                    <button
                                        className="govuk-button progress-save "
                                        onClick={() => {
                                            let valuesObj =
                                                props.props.props.form[
                                                    props.form
                                                ].values || {};

                                            // console.log(
                                            //     "valuesobj:",
                                            //     valuesObj
                                            // );

                                            delete valuesObj[
                                                "_pinswg_appellant_value"
                                            ];

                                            //console.log("on save:", valuesObj);
                                            updateRepresentation(
                                                valuesObj,
                                                false,
                                                true
                                            );
                                        }}
                                    >
                                        {t("common:save-exit-button")}
                                    </button>
                                )}
                            </>
                        )}{" "}
                    {isTypeConfirmed &&
                        selectedRepresentationType != "Questionnaire" && (
                            <>
                                <button
                                    type="submit"
                                    className="govuk-button"
                                    data-module="govuk-button"
                                    disabled={shouldDisableButton({
                                        props,
                                        formObj
                                    })}
                                    onClick={() => {
                                        let valuesObj =
                                            props.props.props.form[props.form]
                                                .values || {};

                                        //console.log("valuesobj:", valuesObj);

                                        delete valuesObj[
                                            "_pinswg_appellant_value"
                                        ];

                                        //console.log("on save:", valuesObj);
                                        updateRepresentation(
                                            valuesObj,
                                            false,
                                            false
                                        );
                                        setRepresentationSubmit(true);
                                    }}
                                >
                                    {t("common:continue-button")}
                                </button>
                                {/* {router.query.state != "edit" && (
                                    <a
                                        onClick={() => {
                                            //setRepresentationCapacity();
                                            props.updateField(
                                                "representationForm",
                                                "representationType",
                                                ""
                                            );
                                        }}
                                        className="govuk-link"
                                    >
                                        {t("common:back-link")}www
                                    </a>
                                )} */}
                                {savingStatus ? (
                                    <span className=" progress-save-active">
                                        {router.locale == "cy"
                                            ? "Nôl data"
                                            : "Saving data"}
                                        <img
                                            className="data-loading-icon"
                                            src="/assets/images/loading.gif"
                                            alt={
                                                router.locale == "cy"
                                                    ? "Nôl data"
                                                    : "Saving data"
                                            }
                                        />
                                    </span>
                                ) : (
                                    <button
                                        className="govuk-button progress-save "
                                        onClick={() => {
                                            let valuesObj =
                                                props.props.props.form[
                                                    props.form
                                                ].values || {};

                                            // console.log(
                                            //     "valuesobj:",
                                            //     valuesObj
                                            // );

                                            delete valuesObj[
                                                "_pinswg_appellant_value"
                                            ];

                                            //console.log("on save:", valuesObj);
                                            updateRepresentation(
                                                valuesObj,
                                                false,
                                                true
                                            );
                                        }}
                                    >
                                        {t("common:save-exit-button")}
                                    </button>
                                )}
                            </>
                        )}
                </div>
            </div>
        </>
    );
};

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

RepLPA = connect((state) => {
    const representationType = selector(state, "representationType");
    const procedureType = selector(state, "procedureType");

    return {
        procedureType,
        representationType
    };
})(RepLPA);

const mapDispatchToProps = (dispatch) => ({
    updateField: (form, field, newValue) =>
        dispatch(change(form, field, newValue)),

    setFilesForRepresentations: (fileList) => {
        dispatch(setFilesForRepresentations(fileList));
    },
    setCurrentReference: (currentReference) => {
        dispatch(setCurrentReference(currentReference));
    }
});

const mapStateToProps = (state, props) => {
    let initialValuesTemp = Object.assign(
        state.currentView.caseReference.hasOwnProperty("repDetails")
            ? state.currentView.caseReference.repDetails
            : state.currentView.caseReference,
        {
            "representationCapacity": "LPA",
            "onBehalfOfLPA":
                props.props.props.accountDetails.accountDetails[
                    "pinswg_contact_associatedlpa@OData.Community.Display.V1.FormattedValue"
                ],
            "firstname":
                props.props.props.accountDetails.accountDetails.firstname,
            "lastname": props.props.props.accountDetails.accountDetails.lastname
        }
    );
    return {
        search: state.search,
        searchResultsObj: state.searchResultsObj,
        formData: state.formData,
        appealType: state.appealType,
        currentView: state.currentView,
        myRepresentations: state.myRepresentations,
        watchedCases: state.watchedCases,
        initialValues: initialValuesTemp
    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(
    reduxForm({
        form: "representationForm",
        enableReinitialize: true,
        destroyOnUnmount: false
    })(RepLPA)
);