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,
    RenderPickList,
} from "./representationElements";
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";

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,
    } = 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 whichQuestionnaire = () => {
        {
            switch (currentView.caseReference.appealType) {
                case 846040000:
                case 846040001:
                case 846040006:
                case 846040025:
                case 846040004:
                case 846040018:
                case 846040003:
                case 846040009:
                case 846040008:
                case 846040017:
                    return (
                        <S78_Questionnaire
                            props={props}
                            containerID={
                                props.props.props.accountDetails.containerID
                            }
                            currentView={currentView}
                            showQuestionnaireSection={showQuestionnaireSection}
                            setShowQuestionnaireSection={
                                setShowQuestionnaireSection
                            }
                            questionnaireCount={questionnaireCount}
                        />
                    );
                    break;

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

    const whichProgress = () => {
        {
            switch (currentView.caseReference.appealType) {
                case 846040000:
                case 846040001:
                case 846040006:
                case 846040025:
                case 846040004:
                case 846040018:
                case 846040003:
                case 846040009:
                case 846040008:
                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(
        '$..[?(@.pinswg_name=="' +
            currentView.caseReference.currentReference +
            '")]',
        setCaseDetailsObj
    );

    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(
        '$..[?(@.pinswg_name=="' +
            currentView.caseReference.currentReference +
            '")]',
        setCaseResultssObj
    );
    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 (
        <>
            <div className="govuk-grid-row">
                <div className="govuk-form-group">
                    {!_.has(
                        formObj["representationForm"],
                        ["values", "representationType"] ||
                            typeof props.representationType != "undefined"
                    ) ? (
                        <>
                            <label
                                className="govuk-label govuk-body-m"
                                htmlFor="representationType"
                            >
                                {t(
                                    "myrepresentations:representation-from-an-lpa-heading"
                                )}
                            </label>
                            <Field
                                id="representationType"
                                name="representationType"
                                component={RenderPickList}
                                datafieldname="representationType"
                                optionsArr={appellantApplicantRepresentationArr}
                            />
                        </>
                    ) : (
                        <label className="govuk-label govuk-body-m">
                            {t("myrepresentations:representation-type")}:{" "}
                            {router.locale == "cy"
                                ? formObj.representationForm.values
                                      .representationType == "Questionnaire"
                                    ? "Holiadur"
                                    : formObj.representationForm.values
                                          .representationType == "Statement"
                                    ? "Datganiad"
                                    : formObj.representationForm.values
                                          .representationType ==
                                      "Final comments"
                                    ? "Sylwadau terfynol"
                                    : formObj.representationForm.values
                                          .representationType
                                : formObj.representationForm.values
                                      .representationType}
                        </label>
                    )}
                </div>
            </div>
            <div className="govuk-grid-row">
                <div className="govuk-form-group">
                    {(_.has(formObj["representationForm"], [
                        "values",
                        "representationType",
                    ]) ||
                        typeof props.representationType != "undefined") &&
                        (props.representationType != "Questionnaire" &&
                        props.representationType != "Select..." ? (
                            <>
                                <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.props.caseReference
                                            }
                                            hint={"sdsd"}
                                            fileList={
                                                (props.formObj.hasOwnProperty(
                                                    "representationForm"
                                                ) &&
                                                    props.formObj[
                                                        "representationForm"
                                                    ].hasOwnProperty(
                                                        "values"
                                                    ) &&
                                                    props.formObj[
                                                        "representationForm"
                                                    ].values.hasOwnProperty(
                                                        "filesList"
                                                    ) &&
                                                    props.props.props.form[
                                                        "representationForm"
                                                    ].values.filesList) ||
                                                []
                                            }
                                            setFilesForRepresentation={[]}
                                            containerID={
                                                props.props.props.accountDetails
                                                    .containerID
                                            }
                                            filenamePrefix={props.formObj}
                                        />
                                        {/* // )} */}
                                    </div>
                                </fieldset>
                            </>
                        ) : (
                            whichQuestionnaire()
                        ))}
                </div>{" "}
            </div>
            <div className="govuk-grid-row">
                <div className="govuk-button-group">
                    {(typeof props.representationType != "undefined" ||
                        _.has(formObj, "values", "representationType")) &&
                        props.representationType == "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>
                                )}
                            </>
                        )}{" "}
                    {(typeof props.representationType != "undefined" ||
                        _.has(formObj, "values", "representationType")) &&
                        props.representationType != "Questionnaire" && (
                            <>
                                <button
                                    type="submit"
                                    className="govuk-button"
                                    data-module="govuk-button"
                                >
                                    {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)),
});

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)
);