import { JSONPath as jsonpath } from "jsonpath-plus";
import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { useDropzone } from "react-dropzone";
import { Field, reduxForm, formValueSelector } from "redux-form";
import { getFormCollectionByID } from "../../../../components/utils";
import {
    FileUploadField,
    RenderDatePicker,
    RenderLPACondtionalRadioList,
    RenderMultiline,
    RenderPickList,
    RenderRadioList,
    RenderRichMultiline,
    RenderTextfield,
} from "../representationElements";
import {
    setRepresentationCapacity,
    setRepresentationSubmit,
    setFilesForRepresentations,
} from "../../../../store/currentView/action";

import { connect } from "react-redux";

let S78_Questionnaire = (props) => {
    let { t } = useTranslation();

    //let t = await getT(props.reqQuery.__nextLocale, "common");

    const router = useRouter();
    const { locale } = router;
    const {
        formObj,
        appellantApplicantRepresentationArr,
        setRepresentationCapacity,
        setRepresentationSubmit,
        currentView,
        procedureTypeValue,
        onBehalfOfLPA,
        showQuestionnaireSection,
        setFilesForRepresentations,
    } = 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");

    let setCaseDetailsObj = router.query.hasOwnProperty("state")
        ? router.query.state == "edit"
            ? props.props.myRepresentations.myRepresentations
            : currentView.caseReference.currentType == "watchedCases"
            ? props.props.watchedCases.watchedCasesDetails
            : props.props.searchResultsObj.searchDetailsObj
        : currentView.caseReference.currentType == "watchedCases"
        ? props.props.watchedCases.watchedCasesDetails
        : 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
            : currentView.caseReference.currentType == "watchedCases"
            ? props.props.watchedCases.watchedCases
            : props.props.searchResultsObj.searchResultsObj
        : currentView.caseReference.currentType == "watchedCases"
        ? props.props.watchedCases.watchedCases
        : props.props.searchResultsObj.searchResultsObj;

    detailsObj = detailsObj[0];

    var resultsObj = {};

    resultsObj = jsonpath(
        "$..[?(@." +
            (router.query.hasOwnProperty("state")
                ? router.query.state == "edit"
                    ? "caseRef"
                    : "ticketnumber"
                : "ticketnumber") +
            '=="' +
            currentView.caseReference.currentReference +
            '")]',
        setCaseResultssObj
    );
    resultsObj = resultsObj[0];

    //console.log(resultsObj);

    const onHandleSubmit = (values) => {
        //if (currentSection == sectionCount) {
        let valuesObj = values || {};

        delete valuesObj["_pinswg_appellant_value"];
        console.log("has errors:", props.invalid);
        props.invalid == false && updateCaseProgress(valuesObj, false, false);

        setCurrentSection(currentSection + 1);
    };

    return (
        <>
            {showQuestionnaireSection == 1 && (
                <fieldset
                    className="govuk-fieldset"
                    aria-describedby="commentBox-hint"
                >
                    <p className="govuk-body">
                        {t("myrepresentations:questionnaire-hint-para")}
                    </p>

                    <h2 className="govuk-heading-s ">
                        {t("myrepresentations:s78-section-heading-one")}{" "}
                    </h2>

                    <div className="govuk-form-group">
                        <div className="govuk-label">
                            1. {t("myrepresentations:s78-section-question-1")}:{" "}
                            {currentView.caseReference.currentReference}
                        </div>
                    </div>
                    <div className="govuk-form-group">
                        <div className="govuk-label">
                            2. {t("myrepresentations:s78-section-question-2")}:{" "}
                            {resultsObj.pinswg_lpareference}
                        </div>
                    </div>
                    <div className="govuk-form-group">
                        <div className="govuk-label">
                            3. {t("myrepresentations:s78-section-question-3")}:{" "}
                            {detailsObj.pinswg_siteaddressline1 +
                                (detailsObj.pinswg_siteaddressline2 != null
                                    ? " " +
                                      detailsObj.pinswg_siteaddressline2 +
                                      " "
                                    : " ") +
                                detailsObj.pinswg_siteaddresstown +
                                " " +
                                detailsObj.pinswg_siteaddresspostcode}
                        </div>
                    </div>
                    <div className="govuk-form-group">
                        <div className="govuk-label">
                            4. {t("myrepresentations:s78-section-question-4")}:{" "}
                            {
                                getFormCollectionByID(
                                    currentView.caseReference.appealType
                                ).value
                            }
                        </div>
                    </div>

                    <div className="govuk-form-group">
                        <Field
                            datafieldname="procedureType"
                            label={
                                "5. " +
                                t("myrepresentations:s78-section-question-5")
                            }
                            name="procedureType"
                            optionsArr={[
                                "Written representations",
                                "Hearing",
                                "Inquiry",
                            ]}
                            id="procedureType"
                            component={RenderPickList}
                            type="text"
                            rows="5"
                            className="govuk-textarea govuk-input--width-30"
                            aria-describedby={props.name + "-hint"}
                        />
                        {(procedureTypeValue == "Hearing" ||
                            procedureTypeValue == "Inquiry") && (
                            <Field
                                label="If Hearing or Inquiry, provide reasons here for why you consider this to be justified"
                                name="procedureTypeEvidence"
                                id="procedureTypeEvidence"
                                component={RenderMultiline}
                                type="text"
                                rows="5"
                                className="govuk-textarea govuk-input--width-30"
                                aria-describedby={props.name + "-hint"}
                                richText="false"
                            />
                        )}

                        <Field
                            label={
                                "6. " +
                                t("myrepresentations:s78-section-question-6")
                            }
                            name="enterToView"
                            id="enterToView"
                            component={RenderRadioList}
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            type="text"
                            rows="5"
                            className="govuk-textarea govuk-input--width-30"
                            aria-describedby={props.name + "-hint"}
                            validate={[required]}
                        />

                        <div className="govuk-form-group">
                            <Field
                                name="enterNeighbouringLandToViewSite"
                                datafieldname="enterNeighbouringLandToViewSite"
                                options={[
                                    t("myrepresentations:questionnaire-yes"),
                                    t("myrepresentations:questionnaire-no"),
                                ]}
                                id="enterNeighbouringLandToViewSite"
                                className="govuk-radios__input"
                                errorMsg={t(
                                    "myrepresentations:select-an-option-label"
                                )}
                                component={RenderLPACondtionalRadioList}
                                validate={[required]}
                                legend={
                                    "7. " +
                                    t(
                                        "myrepresentations:s78-section-question-7"
                                    )
                                }
                                conditionalLabel={t(
                                    "myrepresentations:s78-section-question-7-hint"
                                )}
                                optionSelect={t(
                                    "myrepresentations:questionnaire-yes"
                                )}
                            />
                        </div>
                        <div className="govuk-form-group">
                            <Field
                                name="enterNeighbouringLandAccessRequired"
                                datafieldname="enterNeighbouringLandAccessRequired"
                                options={[
                                    t("myrepresentations:questionnaire-yes"),
                                    t("myrepresentations:questionnaire-no"),
                                ]}
                                id="enterNeighbouringLandAccessRequired"
                                className="govuk-radios__input"
                                errorMsg={t(
                                    "myrepresentations:select-an-option-label"
                                )}
                                component={RenderLPACondtionalRadioList}
                                validate={[required]}
                                legend={
                                    "8. " +
                                    t(
                                        "myrepresentations:s78-section-question-8"
                                    )
                                }
                                conditionalLabel={t(
                                    "myrepresentations:s78-section-question-8-hint"
                                )}
                                optionSelect={t(
                                    "myrepresentations:questionnaire-no"
                                )}
                            />
                        </div>
                        <div className="govuk-form-group">
                            <Field
                                name="healthAndSafetyIssues"
                                datafieldname="healthAndSafetyIssues"
                                options={[
                                    t("myrepresentations:questionnaire-yes"),
                                    t("myrepresentations:questionnaire-no"),
                                ]}
                                id="healthAndSafetyIssues"
                                className="govuk-radios__input"
                                errorMsg={t(
                                    "myrepresentations:select-an-option-label"
                                )}
                                component={RenderLPACondtionalRadioList}
                                validate={[required]}
                                legend={
                                    "9. " +
                                    t(
                                        "myrepresentations:s78-section-question-9"
                                    )
                                }
                                conditionalLabel={t(
                                    "myrepresentations:s78-section-question-9-hint"
                                )}
                                optionSelect={t(
                                    "myrepresentations:questionnaire-yes"
                                )}
                            />
                        </div>

                        <div className="govuk-form-group">
                            <Field
                                className="govuk-input govuk-!-width-three-quarters"
                                id="LPAcontactDetails"
                                name="LPAcontactDetails"
                                value="email"
                                data-aria-controls="LPAcontactDetails"
                                type="text"
                                component={RenderRichMultiline}
                                label={
                                    "10. " +
                                    t(
                                        "myrepresentations:s78-section-question-10"
                                    )
                                }
                            />
                        </div>
                    </div>
                </fieldset>
            )}
            {showQuestionnaireSection == 2 && (
                <fieldset
                    className="govuk-fieldset govuk-!-margin-top-9"
                    aria-describedby="commentBox-hint"
                >
                    <h2 className="govuk-heading-s ">
                        {" "}
                        {t("myrepresentations:s78-section-heading-two")}{" "}
                    </h2>
                    <div className="govuk-form-group">
                        <Field
                            label={
                                "11. " +
                                t("myrepresentations:s78-section-question-11")
                            }
                            name={"LPAcaseFileAndReps"}
                            id={"LPAcaseFileAndReps"}
                            component={RenderMultiline}
                            datafieldname={"LPAcaseFileAndReps"}
                            type="text"
                            rows="5"
                            className="govuk-textarea govuk-input--width-30"
                            aria-describedby={props.name + "-hint"}
                            richText="false"
                            hint={t(
                                "myrepresentations:s78-section-question-11-hint"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            label={
                                "12. " +
                                t("myrepresentations:s78-section-question-12")
                            }
                            name="LPAldpAndMap"
                            id="LPAldpAndMap"
                            datafieldname="LPAldpAndMap"
                            component={RenderMultiline}
                            type="text"
                            rows="5"
                            className="govuk-textarea govuk-input--width-30"
                            aria-describedby={props.name + "-hint"}
                            richText="false"
                            hint={t(
                                "myrepresentations:s78-section-question-12-hint"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            label={
                                "13. " +
                                t("myrepresentations:s78-section-question-13")
                            }
                            name="LPAlocalGuidance"
                            id="LPAlocalGuidance"
                            datafieldname="LPAlocalGuidance"
                            component={RenderMultiline}
                            type="text"
                            rows="5"
                            className="govuk-textarea govuk-input--width-30"
                            aria-describedby={props.name + "-hint"}
                            richText="false"
                            hint={t(
                                "myrepresentations:s78-section-question-13-hint"
                            )}
                        />
                    </div>
                    <Field
                        label={
                            "14. " +
                            t("myrepresentations:s78-section-question-14")
                        }
                        name="LPAintentionToSubmitFullStatement"
                        id="LPAintentionToSubmitFullStatement"
                        component={RenderRadioList}
                        options={[
                            t("myrepresentations:questionnaire-yes"),
                            t("myrepresentations:questionnaire-no"),
                        ]}
                        type="text"
                        rows="5"
                        className="govuk-textarea govuk-input--width-30"
                        aria-describedby={props.name + "-hint"}
                        validate={[required]}
                        errorMsg={t("myrepresentations:select-an-option-label")}
                    />
                </fieldset>
            )}
            {showQuestionnaireSection == 3 && (
                <fieldset
                    className="govuk-fieldset govuk-!-margin-top-9"
                    aria-describedby="commentBox-hint"
                >
                    <h2 className="govuk-heading-s ">
                        {t("myrepresentations:s78-section-heading-three")}
                    </h2>
                    <Field
                        label={
                            "15. " +
                            t("myrepresentations:s78-section-question-15")
                        }
                        name="AONB"
                        id="AONB"
                        component={RenderRadioList}
                        options={[
                            t("myrepresentations:questionnaire-yes"),
                            t("myrepresentations:questionnaire-no"),
                        ]}
                        type="text"
                        rows="5"
                        className="govuk-textarea govuk-input--width-30"
                        aria-describedby={props.name + "-hint"}
                        validate={[required]}
                        errorMsg={t("myrepresentations:select-an-option-label")}
                    />

                    <div className="govuk-form-group">
                        <Field
                            name="ROW"
                            datafieldname="ROW"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="ROW"
                            className="govuk-radios__input"
                            errorMsg={t(
                                "myrepresentations:select-an-option-label"
                            )}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "16. " +
                                t("myrepresentations:s78-section-question-16")
                            }
                            conditionalLabel={t(
                                "myrepresentations:s78-section-question-16-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            name="conservationArea"
                            datafieldname="conservationArea"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="conservationArea"
                            className="govuk-radios__input"
                            errorMsg={t(
                                "myrepresentations:select-an-option-label"
                            )}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "17. " +
                                t("myrepresentations:s78-section-question-17")
                            }
                            conditionalLabel={t(
                                "myrepresentations:s78-section-question-17-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            name="affectListedBuilding"
                            datafieldname="affectListedBuilding"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="affectListedBuilding"
                            className="govuk-radios__input"
                            errorMsg={t(
                                "myrepresentations:select-an-option-label"
                            )}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "18. " +
                                t("myrepresentations:s78-section-question-18")
                            }
                            conditionalLabel={t(
                                "myrepresentations:s78-section-question-18-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            name="TPO"
                            datafieldname="TPO"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="TPO"
                            className="govuk-radios__input"
                            errorMsg={t(
                                "myrepresentations:select-an-option-label"
                            )}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "19. " +
                                t("myrepresentations:s78-section-question-19")
                            }
                            conditionalLabel={t(
                                "myrepresentations:s78-section-question-19-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            name="natureConservationSite"
                            datafieldname="natureConservationSite"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="natureConservationSite"
                            className="govuk-radios__input"
                            errorMsg={t(
                                "myrepresentations:select-an-option-label"
                            )}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "20. " +
                                t("myrepresentations:s78-section-question-20")
                            }
                            conditionalLabel={t(
                                "myrepresentations:s78-section-question-20-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            name="protectedSpecies"
                            datafieldname="protectedSpecies"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="protectedSpecies"
                            className="govuk-radios__input"
                            errorMsg={t(
                                "myrepresentations:select-an-option-label"
                            )}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "21. " +
                                t("myrepresentations:s78-section-question-21")
                            }
                            conditionalLabel={t(
                                "myrepresentations:s78-section-question-21-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                    <Field
                        label={
                            "22. " +
                            t("myrepresentations:s78-section-question-22")
                        }
                        name="gypsyTravellerInvolvment"
                        id="gypsyTravellerInvolvment"
                        component={RenderRadioList}
                        options={[
                            t("myrepresentations:questionnaire-yes"),
                            t("myrepresentations:questionnaire-no"),
                        ]}
                        type="text"
                        rows="5"
                        className="govuk-textarea govuk-input--width-30"
                        aria-describedby={props.name + "-hint"}
                    />
                    <div className="govuk-form-group">
                        <Field
                            name="governmentDepartmentComments"
                            datafieldname="governmentDepartmentComments"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="governmentDepartmentComments"
                            className="govuk-radios__input"
                            errorMsg={t(
                                "myrepresentations:select-an-option-label"
                            )}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "23. " +
                                t("myrepresentations:s78-section-question-23")
                            }
                            conditionalLabel={t(
                                "myrepresentations:s78-section-question-23-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                </fieldset>
            )}
            {showQuestionnaireSection == 4 && (
                <fieldset
                    className="govuk-fieldset govuk-!-margin-top-9"
                    aria-describedby="commentBox-hint"
                >
                    <h2 className="govuk-heading-s ">
                        {t("myrepresentations:s78-section-heading-four")}
                    </h2>
                    <div className="govuk-form-group  govuk-body-m">
                        {"24. " +
                            t("myrepresentations:s78-section-question-24")}
                    </div>

                    <Field
                        label={
                            "a) " +
                            t("myrepresentations:s78-section-question-24a")
                        }
                        name="developmentNotBeginLaterThanFiveYears"
                        id="developmentNotBeginLaterThanFiveYears"
                        component={RenderRadioList}
                        options={[
                            t("myrepresentations:questionnaire-yes"),
                            t("myrepresentations:questionnaire-no"),
                        ]}
                        type="text"
                        rows="5"
                        className="govuk-textarea govuk-input--width-30"
                        aria-describedby={props.name + "-hint"}
                        validate={[required]}
                        errorMsg={t("myrepresentations:select-an-option-label")}
                    />

                    <div className="govuk-form-group">
                        <Field
                            name="developmentCarriedOutInAccordance"
                            datafieldname="developmentCarriedOutInAccordance"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="developmentCarriedOutInAccordance"
                            className="govuk-radios__input"
                            errorMsg={t(
                                "myrepresentations:select-an-option-label"
                            )}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "b) " +
                                t("myrepresentations:s78-section-question-24b")
                            }
                            conditionalLabel={t(
                                "myrepresentations:s78-section-question-24b-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                    <Field
                        label={
                            "c) " +
                            t("myrepresentations:s78-section-question-24c")
                        }
                        name="developmentNotTakePlaceBiodiversity"
                        id="developmentNotTakePlaceBiodiversity"
                        component={RenderRadioList}
                        options={[
                            t("myrepresentations:questionnaire-yes"),
                            t("myrepresentations:questionnaire-no"),
                        ]}
                        type="text"
                        rows="5"
                        className="govuk-textarea govuk-input--width-30"
                        aria-describedby={props.name + "-hint"}
                        validate={[required]}
                        errorMsg={t("myrepresentations:select-an-option-label")}
                    />
                    <Field
                        label={
                            "d) " +
                            t("myrepresentations:s78-section-question-24d")
                        }
                        name="developmentNotTakePlaceBroadband"
                        id="developmentNotTakePlaceBroadband"
                        component={RenderRadioList}
                        options={[
                            t("myrepresentations:questionnaire-yes"),
                            t("myrepresentations:questionnaire-no"),
                        ]}
                        type="text"
                        rows="5"
                        className="govuk-textarea govuk-input--width-30"
                        aria-describedby={props.name + "-hint"}
                        validate={[required]}
                        errorMsg={t("myrepresentations:select-an-option-label")}
                    />

                    <div className="govuk-form-group">
                        <Field
                            name="developmentAnyOtherConditions"
                            datafieldname="developmentAnyOtherConditions"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="developmentAnyOtherConditions"
                            className="govuk-radios__input"
                            errorMsg={t(
                                "myrepresentations:select-an-option-label"
                            )}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "25. " +
                                t("myrepresentations:s78-section-question-25")
                            }
                            conditionalLabel={t(
                                "myrepresentations:s78-section-question-25-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                </fieldset>
            )}
            {showQuestionnaireSection == 5 && (
                <fieldset
                    className="govuk-fieldset govuk-!-margin-top-9"
                    aria-describedby="commentBox-hint"
                >
                    <h2 className="govuk-heading-s ">
                        {t("myrepresentations:s78-section-heading-five-sub")}
                    </h2>
                    <p className="govuk-body">
                        {t("myrepresentations:s78-section-heading-five")}
                    </p>
                    <div className="govuk-form-group">
                        <Field
                            name="copyOfApplicantsCertificate"
                            datafieldname="copyOfApplicantsCertificate"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="copyOfApplicantsCertificate"
                            className="govuk-radios__input"
                            errorMsg={t(
                                "myrepresentations:select-an-option-label"
                            )}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "26. " +
                                t("myrepresentations:s78-section-question-26")
                            }
                            hint={t("myrepresentations:s78-footnote-one")}
                            conditionalLabel={t(
                                "myrepresentations:s78-section-question-26-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-no"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            name="advertismentGiven"
                            datafieldname="advertismentGiven"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="advertismentGiven"
                            className="govuk-radios__input"
                            errorMsg={t(
                                "myrepresentations:select-an-option-label"
                            )}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "27. " +
                                t("myrepresentations:s78-section-question-27")
                            }
                            hint={t("myrepresentations:s78-footnote-two")}
                            conditionalLabel={t(
                                "myrepresentations:s78-section-question-27-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-no"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            name="copyOfLetterOfAppealNotification"
                            datafieldname="copyOfLetterOfAppealNotification"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="copyOfLetterOfAppealNotification"
                            className="govuk-radios__input"
                            errorMsg={t(
                                "myrepresentations:select-an-option-label"
                            )}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "28. " +
                                t("myrepresentations:s78-section-question-28")
                            }
                            conditionalLabel={t(
                                "myrepresentations:s78-section-question-28-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-no"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            name="lpaEIAOS"
                            datafieldname="lpaEIAOS"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="lpaEIAOS"
                            className="govuk-radios__input"
                            errorMsg={t(
                                "myrepresentations:select-an-option-label"
                            )}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "29. " +
                                t("myrepresentations:s78-section-question-29")
                            }
                            conditionalLabel={t(
                                "myrepresentations:s78-section-question-29-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            name="advertismentConsentDiscontinuanceNotice"
                            datafieldname="advertismentConsentDiscontinuanceNotice"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="advertismentConsentDiscontinuanceNotice"
                            className="govuk-radios__input"
                            errorMsg={t(
                                "myrepresentations:select-an-option-label"
                            )}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "30. " +
                                t("myrepresentations:s78-section-question-30")
                            }
                            conditionalLabel={t(
                                "myrepresentations:s78-section-question-30-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            name="detailsOfOtherAppeals"
                            datafieldname="detailsOfOtherAppeals"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="detailsOfOtherAppeals"
                            className="govuk-radios__input"
                            errorMsg={t(
                                "myrepresentations:select-an-option-label"
                            )}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "31. " +
                                t("myrepresentations:s78-section-question-31")
                            }
                            conditionalLabel={t(
                                "myrepresentations:s78-section-question-31-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            name="detailsOfPreviousAppeals"
                            datafieldname="detailsOfPreviousAppeals"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="detailsOfPreviousAppeals"
                            className="govuk-radios__input"
                            errorMsg={t(
                                "myrepresentations:select-an-option-label"
                            )}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "32. " +
                                t("myrepresentations:s78-section-question-32")
                            }
                            conditionalLabel={t(
                                "myrepresentations:s78-section-question-32-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            name="otherRelevantInformation"
                            datafieldname="otherRelevantInformation"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="otherRelevantInformation"
                            className="govuk-radios__input"
                            errorMsg={t(
                                "myrepresentations:select-an-option-label"
                            )}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "33. " +
                                t("myrepresentations:s78-section-question-33")
                            }
                            conditionalLabel={t(
                                "myrepresentations:s78-section-question-33-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                </fieldset>
            )}
            {showQuestionnaireSection == 6 && (
                <fieldset
                    className="govuk-fieldset govuk-!-margin-top-9"
                    aria-describedby="commentBox-hint"
                >
                    {" "}
                    <div className="govuk-form-group govuk-!-margin-bottom-9">
                        <FileUploadField
                            name={"representationDocuments"}
                            id={"representationDocuments"}
                            label={t("myrepresentations:add-files-label")}
                            ticketnumber={props.props.props.caseReference}
                            hint={"sdsd"}
                            fileList={
                                props.currentView.fileList
                                // props.currentView.caseReference.hasOwnProperty(
                                //     "repDetails"
                                // )
                                //     ? props.currentView.caseReference.repDetails.hasOwnProperty(
                                //           "filesList"
                                //       ) &&
                                //       props.currentView.caseReference.repDetails
                                //           .filesList.length > 0
                                //         ? props.currentView.caseReference
                                //               .repDetails.filesList
                                //         : []
                                //     : []
                            }
                            setFilesForRepresentations={
                                setFilesForRepresentations
                            }
                            containerID={
                                props.props.props.props.accountDetails
                                    .containerID
                            }
                            filenamePrefix={props.props.formObj}
                            props={props.props.props}
                            setCurrentReference={props.setCurrentReference}
                        />
                    </div>
                </fieldset>
            )}
            {showQuestionnaireSection == 7 && (
                <fieldset
                    className="govuk-fieldset govuk-!-margin-top-9"
                    aria-describedby="commentBox-hint"
                >
                    <h2 className="govuk-heading-s ">Declaration</h2>
                    <div className="govuk-form-group">
                        <Field
                            className="govuk-input govuk-!-width-one-half"
                            id="caseOfficer"
                            name="caseOfficer"
                            data-aria-controls="caseOfficer"
                            type="text"
                            component={RenderTextfield}
                            label={t(
                                "myrepresentations:s78-section-question-signed"
                            )}
                            validate={[required]}
                            errorMsg={t("myrepresentations:is-required-label")}
                        />
                    </div>
                    <div className="govuk-form-group">
                        {onBehalfOfLPA}
                        <Field
                            className="govuk-input govuk-!-width-one-half"
                            id="onBehalfOfLPA"
                            name="onBehalfOfLPA"
                            data-aria-controls="onBehalfOfLPA"
                            type="text"
                            component={RenderTextfield}
                            label={t(
                                "myrepresentations:s78-section-question-onbehalf"
                            )}
                            disabled={true}
                            errorMsg={t("myrepresentations:is-required-label")}
                        />
                    </div>
                    <Field
                        name="signedDate"
                        id="signedDate"
                        label={t("myrepresentations:s78-section-question-date")}
                        component={RenderDatePicker}
                        validate={[required]}
                        dateStart="0"
                        dateEnd="0"
                        errorMsg={t("myrepresentations:select-a-date-label")}
                        locale={locale}
                    />
                </fieldset>
            )}
        </>
    );
};

//export default S78_Questionnaire;

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

S78_Questionnaire = connect((state) => {
    const representationTypeValue = selector(state, "representationType");
    const procedureTypeValue = selector(state, "procedureType");

    return {
        procedureTypeValue,
        representationTypeValue,
    };
})(S78_Questionnaire);

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

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

const mapStateToProps = (state, props) => {
    return {
        search: state.search,
        searchResultsObj: state.searchResultsObj,
        formData: state.formData,
        appealType: state.appealType,
        currentView: state.currentView,
        myRepresentations: state.myRepresentations,
        initialValues: state.currentView.caseReference.repDetails,
    };
};

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