import Link from "next/link";
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 from "jsonpath";
import { useState } from "react";
import Enforcement_Questionnaire from "./representationQuestionnaires/representationLPAQuestionnaire_enforcement";
import S78_Qquestionnaire 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 {
        formObj,
        appellantApplicantRepresentationArr,
        setRepresentationCapacity,
        setRepresentationSubmit,
        currentView,
        procedureTypeValue,
        onBehalfOfLPA,
        setShowQuestionnaireSection,
        showQuestionnaireSection,
    } = 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 = () => {
        {
            console.log("curr");
            switch (currentView.caseReference.appealType) {
                case 846040000:
                case 846040001:
                case 846040006:
                case 846040025:
                case 846040004:
                case 846040018:
                case 846040003:
                case 846040009:
                case 846040008:
                    return (
                        <S78_Qquestionnaire
                            props={props}
                            containerID={
                                props.props.props.accountDetails.containerID
                            }
                            currentView={currentView}
                            showQuestionnaireSection={showQuestionnaireSection}
                            setShowQuestionnaireSection={
                                setShowQuestionnaireSection
                            }
                        />
                    );
                    break;

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

    const whichProgress = () => {
        {
            console.log("curr");
            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 <>hello</>;
                    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.query(
        setCaseDetailsObj,
        '$..[?(@.pinswg_name=="' +
            currentView.caseReference.currentReference +
            '")]'
    );

    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.query(
        setCaseResultssObj,
        '$..[?(@.pinswg_name=="' +
            currentView.caseReference.currentReference +
            '")]'
    );
    resultsObj = resultsObj[0];

    //console.log(resultsObj, detailsObj);

    return (
        <>
            <div className="govuk-grid-row">
                <h2 className="govuk-heading-m ">
                    {typeof props.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.query(
                              transLookup,
                              '$..[?(@.attributevalue=="' +
                                  currentView.caseReference.appealType +
                                  '")].value_cy'
                          )
                        : getFormCollectionByID(
                              currentView.caseReference.appealType
                          ).value}
                </h2>

                {typeof props.representationType == "undefined" && (
                    <div className="govuk-form-group">
                        <label
                            className="govuk-label govuk-body-m"
                            htmlFor="representationType"
                        >
                            {t(
                                "myrepresentations:representation-from-an-agent-heading"
                            )}
                            ?
                        </label>
                        <Field
                            id="representationType"
                            name="representationType"
                            component={RenderPickList}
                            datafieldname="representationType"
                            optionsArr={appellantApplicantRepresentationArr}
                        />
                    </div>
                )}
            </div>

            <div className="govuk-grid-row">
                <div className="govuk-form-group">
                    {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={[]}
                                            setFilesForRepresentation={[]}
                                            containerID={
                                                props.props.props.accountDetails
                                                    .containerID
                                            }
                                        />
                                    </div>
                                </fieldset>
                            </>
                        ) : (
                            whichQuestionnaire()
                        ))}
                </div>{" "}
            </div>
            <div className="govuk-grid-row">
                <div className="govuk-button-group">
                    {typeof props.representationType != "undefined" &&
                        props.representationType == "Questionnaire" && (
                            <>
                                {showQuestionnaireSection < 7 && (
                                    <a
                                        href="#"
                                        onClick={() => {
                                            setShowQuestionnaireSection(
                                                showQuestionnaireSection + 1
                                            );
                                        }}
                                        className="govuk-button"
                                    >
                                        Next section
                                    </a>
                                )}
                                {showQuestionnaireSection == 9 && (
                                    <button
                                        type="submit"
                                        className="govuk-button"
                                        data-module="govuk-button"
                                    >
                                        {t("common:continue-button")}ww
                                    </button>
                                )}
                                {showQuestionnaireSection > 1 && (
                                    <a
                                        onClick={() => {
                                            setShowQuestionnaireSection(
                                                showQuestionnaireSection - 1
                                            );
                                        }}
                                        className="govuk-link"
                                    >
                                        Back
                                    </a>
                                )}
                            </>
                        )}{" "}
                    {typeof props.representationType != "undefined" &&
                        props.representationType != "Questionnaire" && (
                            <>
                                <button
                                    type="submit"
                                    className="govuk-button"
                                    data-module="govuk-button"
                                >
                                    {t("common:continue-button")}
                                </button>
                                {/* <a
                            onClick={() => {
                                
                                setRepresentationSubmit(false);
                            }}
                            className="govuk-button"
                        >
                             {t("common:continue-button")}
                        </a> */}
                                <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,
        {
            "onBehalfOfLPA":
                props.props.props.accountDetails.accountDetails[
                    "pinswg_contact_associatedlpa@OData.Community.Display.V1.FormattedValue"
                ],
        }
    );
    return {
        search: state.search,
        searchResultsObj: state.searchResultsObj,
        formData: state.formData,
        appealType: state.appealType,
        currentView: state.currentView,
        myRepresentations: state.myRepresentations,
        initialValues: initialValuesTemp,
    };
};

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