import Link from "next/link";
import _ from "lodash";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { connect } from "react-redux";
import { Field, reduxForm, formValueSelector } from "redux-form";
import {
    RenderPickList,
    RenderTextfield,
    RenderRadioList,
    RenderMultiline,
    RenderCondtionalRadioList,
    RenderLPACondtionalRadioList,
    FileUploadField,
    RenderRichMultiline,
    RenderDatePicker,
} from "./representationElements";
import { getFormCollectionByID, formatDates } from "../../utils";
import {
    setRepresentationCapacity,
    setRepresentationSubmit,
} from "../../../store/currentView/action";
import { useDropzone } from "react-dropzone";
import { select } from "xpath";
import { JSONPath as jsonpath } from "jsonpath-plus";
import { useState } from "react";
import Enforcement_Questionnaire from "./representationQuestionnaires/representationLPAQuestionnaire_enforcement";
import S78_Questionnaire from "./representationQuestionnaires/representationLPAQuestionnaire_s78";
import RepresentationProgress_s78 from "./representationProgress/representationProgress_s78";
import RepresentationProgress_enforcement from "./representationProgress/representationProgress_enforcement";
import transLookup from "../../../data/lookuptranslations.json";

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,
    } = 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 updateQuestionnaireCount = () => {
        {
            switch (currentView.caseReference.appealType) {
                case 846040000:
                case 846040001:
                case 846040006:
                case 846040025:
                case 846040004:
                case 846040018:
                case 846040003:
                case 846040009:
                case 846040008:
                    setQuestionnaireCount(7);
                    break;

                case 846040005:
                case 846040006:
                case 846040007:
                    setQuestionnaireCount(9);

                    break;
                default:
                    setQuestionnaireCount(7);

                    break;
            }
        }
    };
    const whichQuestionnaire = () => {
        {
            switch (currentView.caseReference.appealType) {
                case 846040000:
                case 846040001:
                case 846040006:
                case 846040025:
                case 846040004:
                case 846040018:
                case 846040003:
                case 846040009:
                case 846040008:
                    updateQuestionnaireCount();
                    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:
                    updateQuestionnaireCount();
                    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:
                    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["representationForm"].hasOwnProperty("values") &&
        props.formObj["representationForm"].values.hasOwnProperty(
            "representationCapacity"
        ) &&
        props.formObj["representationForm"].values.hasOwnProperty(
            "representationType"
        ) &&
        setRepFileName(props.formObj["representationForm"].values);

    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">
                            Representation Type:{" "}
                            {
                                formObj.representationForm.values
                                    .representationType
                            }{" "}
                        </label>
                    )}
                    {/* {!formObj["representationForm"].hasOwnProperty("values") ||
                    typeof formObj.representationForm.values
                        .representationType == "undefined" ? (
                        <>
                            <h2 className="govuk-heading-m ">
                                {typeof props.representationType !=
                                    "undefined" ||
                                typeof formObj.representationForm.values
                                    .representationType != "undefined"
                                    ? props.representationType ==
                                      "Questionnaire"
                                        ? locale == "cy"
                                            ? "Holiadur"
                                            : props.representationType
                                        : props.representationType
                                    : locale == "cy"
                                    ? "Cynrychioliadau"
                                    : "Representation"}{" "}
                                {locale == "cy"
                                    ? "o ACLI am a"
                                    : "from an LPA for a"}{" "}
                                {locale == "cy"
                                    ? jsonpath(
                                          '$..[?(@.attributevalue=="' +
                                              currentView.caseReference
                                                  .appealType +
                                              '")].value_cy',
                                          transLookup
                                      )
                                    : getFormCollectionByID(
                                          currentView.caseReference.appealType
                                      ).value}
                            </h2>
                            <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">
                            Representation Type:{" "}
                            {
                                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" ? (
                            <>
                                <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">
                                        <FileUploadField
                                            name={"representationDocuments"}
                                            label={t(
                                                "myrepresentations:add-files-label"
                                            )}
                                            ticketnumber={
                                                props.props.caseReference
                                            }
                                            hint={"sdsd"}
                                            fileList={
                                                props.props.props.form[
                                                    "representationForm"
                                                ].values.filesList || []
                                            }
                                            setFilesForRepresentation={[]}
                                            containerID={
                                                props.props.props.accountDetails
                                                    .containerID
                                            }
                                            filenamePrefix={props}
                                        />
                                    </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>
                                )}
                            </>
                        )}{" "}
                    {(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>
                                <a
                                    onClick={() => {
                                        //setRepresentationCapacity();
                                    }}
                                    className="govuk-link"
                                >
                                    {t("common:back-link")}
                                </a>
                            </>
                        )}
                </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 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)(
    reduxForm({
        form: "representationForm",
        enableReinitialize: true,
        destroyOnUnmount: false,
    })(RepLPA)
);