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 {
    setRepresentationCapacity,
    setRepresentationSubmit,
} from "../../../../store/currentView/action";
import { useDropzone } from "react-dropzone";
import { select } from "xpath";
import { JSONPath as jsonpath } from "jsonpath-plus";

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

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

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

    return (
        <>
            {showQuestionnaireSection == 1 && (
                <fieldset
                    className="govuk-fieldset"
                    aria-describedby="commentBox-hint"
                >
                    <h3 className="govuk-heading-s ">
                        Enforcement_Questionnaire{" "}
                        {t("myrepresentations:enf-section-heading-one")}{" "}
                    </h3>
                    <div className="govuk-form-group">
                        <div className="govuk-label">
                            1. {t("myrepresentations:enf-section-question-1")}:{" "}
                            {currentView.caseReference.currentReference}
                        </div>
                    </div>
                    <div className="govuk-form-group">
                        <div className="govuk-label">
                            2. {t("myrepresentations:enf-section-question-2")}:{" "}
                            {resultsObj.pinswg_lpareference}
                        </div>
                    </div>
                    <div className="govuk-form-group">
                        <div className="govuk-label">
                            3. {t("myrepresentations:enf-section-question-3")}:{" "}
                            {detailsObj.pinswg_siteaddressline1 +
                                " " +
                                detailsObj.pinswg_siteaddressline2 +
                                " " +
                                detailsObj.pinswg_siteaddresstown +
                                " " +
                                detailsObj.pinswg_siteaddresspostcode}
                        </div>
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            label={t(
                                "myrepresentations:enf-section-question-4"
                            )}
                            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. If you consider an Inquiry is necessary, please state your estimated number of sitting days."
                                name="procedureTypeEvidence"
                                id="procedureTypeEvidence"
                                component={RenderMultiline}
                                type="text"
                                rows="5"
                                className="govuk-textarea govuk-input--width-30 govuk-!-margin-bottom-9"
                                aria-describedby={props.name + "-hint"}
                                richText="false"
                            />
                        )}

                        <Field
                            label={
                                "5. " +
                                t("myrepresentations:enf-section-question-5")
                            }
                            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"}
                        />

                        <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("newappeal:select-an-option-label")}
                                component={RenderLPACondtionalRadioList}
                                validate={[required]}
                                legend={
                                    "6. " +
                                    t(
                                        "myrepresentations:enf-section-question-6"
                                    )
                                }
                                conditionalLabel={t(
                                    "myrepresentations:enf-section-question-6-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("newappeal:select-an-option-label")}
                                component={RenderLPACondtionalRadioList}
                                validate={[required]}
                                legend={
                                    "7. " +
                                    t(
                                        "myrepresentations:enf-section-question-7"
                                    )
                                }
                                conditionalLabel={t(
                                    "myrepresentations:enf-section-question-7-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("newappeal:select-an-option-label")}
                                component={RenderLPACondtionalRadioList}
                                validate={[required]}
                                legend={
                                    "8. " +
                                    t(
                                        "myrepresentations:enf-section-question-8"
                                    )
                                }
                                conditionalLabel={t(
                                    "myrepresentations:enf-section-question-8-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={
                                    "9. " +
                                    t(
                                        "myrepresentations:enf-section-question-9"
                                    )
                                }
                            />
                        </div>
                    </div>
                </fieldset>
            )}{" "}
            {showQuestionnaireSection == 2 && (
                <fieldset
                    className="govuk-fieldset govuk-!-margin-top-9"
                    aria-describedby="commentBox-hint"
                >
                    <h3 className="govuk-heading-s ">
                        {t("myrepresentations:enf-section-heading-two")}
                    </h3>
                    <div className="govuk-form-group">
                        <Field
                            label={
                                "10. " +
                                t("myrepresentations:enf-section-question-10")
                            }
                            name="feePaid"
                            id="feePaid"
                            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>
                    <div className="govuk-form-group">
                        <Field
                            name="feeExempt"
                            datafieldname="feeExempt"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="feeExempt"
                            className="govuk-radios__input"
                            errorMsg={t("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "11. " +
                                t("myrepresentations:enf-section-question-11")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-11-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                </fieldset>
            )}{" "}
            {showQuestionnaireSection == 3 && (
                <fieldset
                    className="govuk-fieldset govuk-!-margin-top-9"
                    aria-describedby="commentBox-hint"
                >
                    <h3 className="govuk-heading-s ">
                        {t("myrepresentations:enf-section-heading-three")}
                    </h3>
                    <div className="govuk-form-group">
                        <Field
                            name="previousGrantedCerts"
                            datafieldname="previousGrantedCerts"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="previousGrantedCerts"
                            className="govuk-radios__input"
                            errorMsg={t("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "12. " +
                                t("myrepresentations:enf-section-question-12")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-12-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            name="stopNoticeServed"
                            datafieldname="stopNoticeServed"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="stopNoticeServed"
                            className="govuk-radios__input"
                            errorMsg={t("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "13. " +
                                t("myrepresentations:enf-section-question-12")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-13-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            name="relatedCases"
                            datafieldname="relatedCases"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="relatedCases"
                            className="govuk-radios__input"
                            errorMsg={t("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "14. " +
                                t("myrepresentations:enf-section-question-14")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-14-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            name="previousEnforcement"
                            datafieldname="previousEnforcement"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="previousEnforcement"
                            className="govuk-radios__input"
                            errorMsg={t("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "15. " +
                                t("myrepresentations:enf-section-question-15")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-15-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            name="subjectArticle4"
                            datafieldname="subjectArticle4"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="subjectArticle4"
                            className="govuk-radios__input"
                            errorMsg={t("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "16. " +
                                t("myrepresentations:enf-section-question-16")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-16-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            name="previousPDRRestriction"
                            datafieldname="previousPDRRestriction"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="previousPDRRestriction"
                            className="govuk-radios__input"
                            errorMsg={t("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "17. " +
                                t("myrepresentations:enf-section-question-17")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-17-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                </fieldset>
            )}{" "}
            {showQuestionnaireSection == 4 && (
                <fieldset
                    className="govuk-fieldset govuk-!-margin-top-9"
                    aria-describedby="commentBox-hint"
                >
                    <h3 className="govuk-heading-s ">
                        {" "}
                        {t("myrepresentations:enf-section-heading-four")}{" "}
                    </h3>
                    <div className="govuk-form-group">
                        <Field
                            label={
                                "18. " +
                                t("myrepresentations:enf-section-question-18")
                            }
                            name="LPAldpAndMap"
                            id="LPAldpAndMap"
                            component={RenderMultiline}
                            type="text"
                            rows="5"
                            className="govuk-textarea govuk-input--width-30"
                            aria-describedby={props.name + "-hint"}
                            richText="false"
                            hint={t(
                                "myrepresentations:enf-section-question-18-hint"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            label={
                                "19. " +
                                t("myrepresentations:enf-section-question-19")
                            }
                            name="LPAlocalGuidance"
                            id="LPAlocalGuidance"
                            component={RenderMultiline}
                            type="text"
                            rows="5"
                            className="govuk-textarea govuk-input--width-30"
                            aria-describedby={props.name + "-hint"}
                            richText="false"
                            hint={t(
                                "myrepresentations:enf-section-question-19-hint"
                            )}
                        />
                    </div>
                    <Field
                        label={
                            "20. " +
                            t("myrepresentations:enf-section-question-20")
                        }
                        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"}
                    />
                </fieldset>
            )}{" "}
            {showQuestionnaireSection == 5 && (
                <fieldset
                    className="govuk-fieldset govuk-!-margin-top-9"
                    aria-describedby="commentBox-hint"
                >
                    <h3 className="govuk-heading-s ">
                        {t("myrepresentations:enf-section-heading-five")}
                    </h3>
                    <Field
                        label={
                            "21. " +
                            t("myrepresentations:enf-section-question-21")
                        }
                        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"}
                    />

                    <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("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "22. " +
                                t("myrepresentations:enf-section-question-22")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-22-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("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "23. " +
                                t("myrepresentations:enf-section-question-23")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-23-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("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "24. " +
                                t("myrepresentations:enf-section-question-23")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-24-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("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "25. " +
                                t("myrepresentations:enf-section-question-25")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-25-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("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "26. " +
                                t("myrepresentations:enf-section-question-26")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-26-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("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "27. " +
                                t("myrepresentations:enf-section-question-27")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-27-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            label={
                                "28. " +
                                t("myrepresentations:enf-section-question-28")
                            }
                            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>
                    <div className="govuk-form-group">
                        <Field
                            name="floodingIssue"
                            datafieldname="floodingIssue"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="floodingIssue"
                            className="govuk-radios__input"
                            errorMsg={t("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "29. " +
                                t("myrepresentations:enf-section-question-29")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-29-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                    <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("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "30. " +
                                t("myrepresentations:enf-section-question-30")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-30-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                </fieldset>
            )}{" "}
            {showQuestionnaireSection == 6 && (
                <fieldset
                    className="govuk-fieldset govuk-!-margin-top-9"
                    aria-describedby="commentBox-hint"
                >
                    <h3 className="govuk-heading-s ">
                        {t("myrepresentations:enf-section-heading-six")}
                    </h3>
                    <div className="govuk-form-group  govuk-body-m">
                        {t("myrepresentations:enf-section-question-31")}
                    </div>

                    <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("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={t(
                                "myrepresentations:enf-section-question-31a"
                            )}
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-31a-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                    <Field
                        label={t("myrepresentations:enf-section-question-31b")}
                        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"}
                    />
                    <Field
                        label={t("myrepresentations:enf-section-question-31c")}
                        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"}
                    />

                    <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("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "32. " +
                                t("myrepresentations:enf-section-question-32")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-32-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                </fieldset>
            )}{" "}
            {showQuestionnaireSection == 7 && (
                <fieldset
                    className="govuk-fieldset govuk-!-margin-top-9"
                    aria-describedby="commentBox-hint"
                >
                    <h3 className="govuk-heading-s ">
                        {t("myrepresentations:enf-section-heading-seven")}
                    </h3>

                    <div className="govuk-form-group">
                        <Field
                            name="copyOfEnforcementNotice"
                            datafieldname="copyOfEnforcementNotice"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="copyOfEnforcementNotice"
                            className="govuk-radios__input"
                            errorMsg={t("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "33. " +
                                t("myrepresentations:enf-section-question-33")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-33-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-no"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            name="enforcementNoticePlan"
                            datafieldname="enforcementNoticePlan"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="enforcementNoticePlan"
                            className="govuk-radios__input"
                            errorMsg={t("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "34. " +
                                t("myrepresentations:enf-section-question-34")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-34-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-no"
                            )}
                        />
                    </div>
                    <div className="govuk-form-group">
                        <Field
                            name="listOfNotifiedOfEnforcement"
                            datafieldname="listOfNotifiedOfEnforcement"
                            options={[
                                t("myrepresentations:questionnaire-yes"),
                                t("myrepresentations:questionnaire-no"),
                            ]}
                            id="listOfNotifiedOfEnforcement"
                            className="govuk-radios__input"
                            errorMsg={t("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "35. " +
                                t("myrepresentations:enf-section-question-35")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-35-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("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "36. " +
                                t("myrepresentations:enf-section-question-36")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-36-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("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "37. " +
                                t("myrepresentations:enf-section-question-37")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-37-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("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "38. " +
                                t("myrepresentations:enf-section-question-38")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-38-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("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "39. " +
                                t("myrepresentations:enf-section-question-39")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-39-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("newappeal:select-an-option-label")}
                            component={RenderLPACondtionalRadioList}
                            validate={[required]}
                            legend={
                                "40. " +
                                t("myrepresentations:enf-section-question-40")
                            }
                            conditionalLabel={t(
                                "myrepresentations:enf-section-question-40-hint"
                            )}
                            optionSelect={t(
                                "myrepresentations:questionnaire-yes"
                            )}
                        />
                    </div>
                </fieldset>
            )}{" "}
            {showQuestionnaireSection == 8 && (
                <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.caseReference}
                            hint={"sdsd"}
                            fileList={
                                props.props.props.props.form[
                                    "representationForm"
                                ].values.filesList || []
                            }
                            setFilesForRepresentation={[]}
                            containerID={props.containerID}
                            filenamePrefix={props.props}
                        />
                    </div>
                </fieldset>
            )}
            {showQuestionnaireSection == 9 && (
                <fieldset
                    className="govuk-fieldset govuk-!-margin-top-9"
                    aria-describedby="commentBox-hint"
                >
                    <h3 className="govuk-heading-s ">
                        {t("myrepresentations:enf-section-heading-eight")}
                    </h3>
                    <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:enf-section-question-signed"
                            )}
                            validate={[required]}
                        />
                    </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:enf-section-question-onbehalf"
                            )}
                            validate={[required]}
                        />
                    </div>
                    <Field
                        name="signedDate"
                        id="signedDate"
                        label={t("myrepresentations:enf-section-question-date")}
                        component={RenderDatePicker}
                        validate={[required]}
                        errorMsg="Select a date"
                        dateStart="0"
                        dateEnd="1-y"
                    />
                </fieldset>
            )}
        </>
    );
};

//export default Enforcement_Questionnaire;

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

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

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

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)(
    reduxForm({
        form: "representationForm",
        enableReinitialize: true,
        destroyOnUnmount: false,
    })(Enforcement_Questionnaire)
);