import {
    Document,
    Image,
    Page,
    StyleSheet,
    Text,
    View,
    Font,
} from "@react-pdf/renderer";
import Html from "react-pdf-html";
import { getFormCollectionByID, bytesToSize } from "../../components/utils";

const styles = StyleSheet.create({
    page: {
        backgroundColor: "white",
        padding: 20,
        fontSize: 16,
        paddingBottom: 50,
    },
    header: {
        fontSize: 25,
        fontFamily: "Helvetica",
        flexDirection: "row",
        justifyContent: "space-between",
    },
    subHeader: {
        fontSize: 20,
    },
    logoImage: { width: "200pt" },
    questionBullet: { width: "5%", fontSize: 12 },
    questionText: { width: "30%", fontSize: 12 },
    questionTextMid: { width: "80%", fontSize: 12 },
    questionTextWide: { width: "95%", fontSize: 12, marginBottom: 5 },
    questionAnswer: {
        color: "#757575",
        width: "65%",
        fontSize: 12,
        padding: 5,
        border: 1,
        borderColor: "#eee",
        paddingLeft: 10,
        backgroundColor: "white",
    },
    questionAnswerMid: {
        color: "#757575",
        width: "20%",
        fontSize: 12,
        padding: 5,
        border: 1,
        borderColor: "#eee",
        paddingLeft: 10,
        backgroundColor: "white",
    },
    questionAnswerWide: {
        color: "#757575",
        width: "95%",
        fontSize: 12,
        marginLeft: "5%",
        border: 1,
        borderColor: "#eee",
        backgroundColor: "white",
        padding: 5,
    },

    sectionContainer: {
        backgroundColor: "#F8F8F8",
        padding: 10,
        marginTop: 20,
        fontSize: 15,
    },
    pageNumber: {
        position: "absolute",
        fontSize: 12,
        bottom: 20,
        left: 0,
        right: 0,
        textAlign: "center",
        color: "grey",
    },

    richArea: {
        fontSize: 12,
        flexDirection: "column",
    },
});

export const EnforcementQuestionnaire_pdf = ({ docProps }) => {
    //console.log(docProps);
    function formatDates(dateObj) {
        var dateObj = new Date(dateObj);
        var dd = String(dateObj.getDate()).padStart(2, "0");
        var mm = String(dateObj.getMonth() + 1).padStart(2, "0"); //January is 0!
        var yyyy = dateObj.getFullYear();

        return dd + "/" + mm + "/" + yyyy;
    }
    let values = docProps;
    let appealTypeValue = getFormCollectionByID(values.appealType);
    //console.log("//////////////////////\n docpropseeeee:".docProps);

    //console.log("sdffhjdhjdjdgkj: ", values.procedureType);
    Font.registerHyphenationCallback((word) => [word]);

    function CleanHTML(htmlStr) {
        let cleanStr =
            typeof htmlStr === "string"
                ? htmlStr.replace(/<p><br><\/p>/g, "")
                : "";

        return cleanStr;
    }

    return (
        <Document>
            <Page size="A4" style={styles.page} wrap>
                <View style={{ padding: 20 }}>
                    <View style={styles.header}>
                        <View>
                            <Text
                                style={{
                                    width: "60%",
                                    fontFamily: "Helvetica-Bold",
                                }}
                            >
                                Local Planning Authority Questionnaire
                            </Text>
                            <View>
                                <Text
                                    style={{
                                        width: "60%",
                                        fontSize: 15,
                                        marginTop: 20,
                                        fontFamily: "Helvetica-Bold",
                                    }}
                                >
                                    For Planning Enforcement Appeals
                                </Text>
                            </View>
                        </View>
                        <Image
                            style={styles.logoImage}
                            src="public/assets/images/pedw_logo.png"
                            alt="PEDW Logo"
                        />
                    </View>

                    <View>
                        <Text style={{ marginTop: 10, fontSize: 14 }}>
                            The LPA must send the completed questionnaire and
                            any attachments to PEDW.casework@gov.wales and the
                            appellant (or their agent) within 5 working days of
                            the start date specified in our start letter.
                        </Text>
                    </View>
                    <View style={styles.section}>
                        <View
                            style={{
                                marginTop: 10,
                                fontFamily: "Helvetica-Bold",
                            }}
                        >
                            <Text style={{ fontSize: 14 }}>Case details</Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>1.</Text>
                                <Text style={styles.questionText}>
                                    {t(
                                        "myrepresentations:s78-section-question-1"
                                    )}
                                    :
                                </Text>
                                <Text style={styles.questionAnswer}>
                                    {values.caseRef}
                                </Text>
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>2.</Text>
                                <Text style={styles.questionText}>
                                    {t(
                                        "myrepresentations:s78-section-question-2"
                                    )}
                                    :
                                </Text>
                                <Text style={styles.questionAnswer}>
                                    {values.lpaRef}
                                </Text>
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>3.</Text>
                                <Text style={styles.questionText}>
                                    Site address/grid ref:
                                </Text>
                                <Text style={styles.questionAnswer}>
                                    {values.siteAddress}
                                </Text>
                            </View>
                        </View>
                    </View>
                    <View>
                        <View
                            style={{
                                marginTop: 10,
                                fontFamily: "Helvetica-Bold",
                            }}
                        >
                            <Text style={{ fontSize: 14 }}>
                                {t("myrepresentations:s78-section-heading-one")}
                            </Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    wrap={false}
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        4.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        Which procedure do you consider the
                                        appeal should follow?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.procedureType}
                                    </Text>
                                </View>
                                {values.procedureType !=
                                    "Written representations" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(
                                                values.procedureTypeEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>5.</Text>
                                <Text style={styles.questionTextMid}>
                                    Will the Inspector need to enter the appeal
                                    site/property?
                                </Text>
                                <Text style={styles.questionAnswerMid}>
                                    {values.enterToView}
                                </Text>
                            </View>

                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        6.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        Do you consider that the Inspector needs
                                        to enter neighbouring private
                                        land/property to view the site?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.enterNeighbouringLandToViewSite}
                                    </Text>
                                </View>

                                {values.enterNeighbouringLandToViewSite ==
                                    "Yes" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={{ fontSize: 12 }}>
                                            {CleanHTML(
                                                values.enterNeighbouringLandToViewSiteEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        7.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        If access to private land/buildings is
                                        required, are you content for the
                                        Inspector to visit the site on an
                                        ‘access required’ basis, with only the
                                        landowner or their representative
                                        present?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {
                                            values.enterNeighbouringLandAccessRequired
                                        }
                                    </Text>
                                </View>
                                {values.enterNeighbouringLandAccessRequired !=
                                    "Yes" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(
                                                values.enterNeighbouringLandAccessRequiredEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        8.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        Are you aware of any health and safety
                                        issues which would need to be considered
                                        when the Inspector visits the site?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.healthAndSafetyIssues}
                                    </Text>
                                </View>
                                {values.healthAndSafetyIssues == "Yes" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(
                                                values.healthAndSafetyIssuesEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        9.
                                    </Text>

                                    <Text style={styles.questionTextWide}>
                                        LPA contact for site visit, hearing or
                                        inquiry arrangements:
                                    </Text>
                                </View>
                                <View style={styles.questionAnswerWide}>
                                    <Html style={styles.richArea}>
                                        {CleanHTML(values.LPAcontactDetails)}
                                    </Html>
                                </View>
                            </View>
                        </View>
                    </View>

                    <View>
                        <View
                            style={{
                                marginTop: 10,
                                fontFamily: "Helvetica-Bold",
                            }}
                        >
                            <Text style={{ fontSize: 14 }}>
                                Deemed Application Fee{" "}
                            </Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    wrap={false}
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        10.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        Has the Local Planning Authority
                                        received the correct fee payable in
                                        relation to this appeal for the deemed
                                        planning application/ground (a) to be
                                        considered?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.feePaid}
                                    </Text>
                                </View>
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    wrap={false}
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        11.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        Is the appeal fee exempt?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.feeExempt}
                                    </Text>
                                </View>
                                {values.feeExempt == "Yes" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(
                                                values.feeExemptEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>
                        </View>
                    </View>

                    <View>
                        <View
                            style={{
                                marginTop: 10,
                                fontFamily: "Helvetica-Bold",
                            }}
                        >
                            <Text style={{ fontSize: 14 }}>
                                Supporting documents
                            </Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>12.</Text>
                                <Text style={styles.questionTextMid}>
                                    Have any planning permissions or lawful
                                    development certificates been granted
                                    previously in respect of the development or
                                    on the site?
                                </Text>
                                <Text style={styles.questionAnswerMid}>
                                    {values.previousGrantedCerts}
                                </Text>
                            </View>
                            {values.previousGrantedCerts == "Yes" && (
                                <View style={styles.questionAnswerWide}>
                                    <Html style={styles.richArea}>
                                        {CleanHTML(
                                            values.previousGrantedCertsEvidence
                                        )}
                                    </Html>
                                </View>
                            )}
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>13.</Text>
                                <Text style={styles.questionTextMid}>
                                    Has a Stop Notice been served in addition to
                                    the Enforcement Notice?
                                </Text>
                                <Text style={styles.questionAnswerMid}>
                                    {values.stopNoticeServed}
                                </Text>
                            </View>
                            {values.stopNoticeServed == "Yes" && (
                                <View style={styles.questionAnswerWide}>
                                    <Html style={styles.richArea}>
                                        {CleanHTML(
                                            values.stopNoticeServedEvidence
                                        )}
                                    </Html>
                                </View>
                            )}
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>14.</Text>
                                <Text style={styles.questionTextMid}>
                                    Are there any related cases (e.g. appeals
                                    under s78 of the Town and Country Planning
                                    Act 1990) which are currently or have
                                    previously been before the Welsh Ministers?
                                </Text>
                                <Text style={styles.questionAnswerMid}>
                                    {values.relatedCases}
                                </Text>
                            </View>
                            {values.relatedCases == "Yes" && (
                                <View style={styles.questionAnswerWide}>
                                    <Html style={styles.richArea}>
                                        {CleanHTML(values.relatedCasesEvidence)}
                                    </Html>
                                </View>
                            )}
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>15.</Text>
                                <Text style={styles.questionTextMid}>
                                    Has there been any previous enforcement
                                    action on the site?
                                </Text>
                                <Text style={styles.questionAnswerMid}>
                                    {values.previousEnforcement}
                                </Text>
                            </View>
                            {values.previousEnforcement == "Yes" && (
                                <View style={styles.questionAnswerWide}>
                                    <Html style={styles.richArea}>
                                        {CleanHTML(
                                            values.previousEnforcementEvidence
                                        )}
                                    </Html>
                                </View>
                            )}
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>16.</Text>
                                <Text style={styles.questionTextMid}>
                                    Is the site subject to an Article 4
                                    Direction?
                                </Text>
                                <Text style={styles.questionAnswerMid}>
                                    {values.subjectArticle4}
                                </Text>
                            </View>
                            {values.subjectArticle4 == "Yes" && (
                                <View style={styles.questionAnswerWide}>
                                    <Html style={styles.richArea}>
                                        {CleanHTML(
                                            values.subjectArticle4Evidence
                                        )}
                                    </Html>
                                </View>
                            )}
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>17.</Text>
                                <Text style={styles.questionTextMid}>
                                    Have permitted development rights been
                                    restricted by any previous planning
                                    condition?
                                </Text>
                                <Text style={styles.questionAnswerMid}>
                                    {values.previousPDRRestriction}
                                </Text>
                            </View>
                            {values.previousPDRRestriction == "Yes" && (
                                <View style={styles.questionAnswerWide}>
                                    <Html style={styles.richArea}>
                                        {CleanHTML(
                                            values.previousPDRRestrictionEvidence
                                        )}
                                    </Html>
                                </View>
                            )}
                        </View>
                    </View>

                    <View>
                        <View
                            style={{
                                marginTop: 10,
                                fontFamily: "Helvetica-Bold",
                            }}
                        >
                            <Text style={{ fontSize: 14 }}>
                                Supporting documents
                            </Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>18.</Text>
                                <Text style={styles.questionText}>
                                    LPA’s adopted Local Development Plan and
                                    Proposals Map
                                </Text>
                                <View style={styles.questionAnswer}>
                                    <Html style={styles.richArea}>
                                        {CleanHTML(values.LPAldpAndMap)}
                                    </Html>
                                </View>
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>19.</Text>
                                <Text style={styles.questionText}>
                                    Adopted local guidance relevant to the
                                    proposal:
                                </Text>
                                <View style={styles.questionAnswer}>
                                    <Html style={styles.richArea}>
                                        {CleanHTML(values.LPAlocalGuidance)}
                                    </Html>
                                </View>
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>20.</Text>
                                <Text style={styles.questionTextMid}>
                                    If applicable, do you intend to submit a
                                    full statement at the 4-week stage?
                                </Text>
                                <Text style={styles.questionAnswerMid}>
                                    {values.LPAintentionToSubmitFullStatement}
                                </Text>
                            </View>
                        </View>
                    </View>
                    <View>
                        <View
                            style={{
                                marginTop: 10,
                                fontFamily: "Helvetica-Bold",
                            }}
                        >
                            <Text style={{ fontSize: 14 }}>
                                Statutory considerations
                            </Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>21.</Text>
                                <Text style={styles.questionTextMid}>
                                    Is all or part of the site within an Area of
                                    Outstanding Natural Beauty?
                                </Text>
                                <Text style={styles.questionAnswerMid}>
                                    {values.AONB}
                                </Text>
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        22.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        Does the site include any public rights
                                        of way?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.ROW}
                                    </Text>
                                </View>
                                {values.ROW == "Yes" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(values.ROWEvidence)}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        23.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        Is all or part of the site within a
                                        Conservation Area?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.conservationArea}{" "}
                                    </Text>
                                </View>
                                {values.conservationArea == "Yes" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(
                                                values.conservationAreaEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        24.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        Does the development include works to,
                                        or affect the setting of, a listed
                                        building, Scheduled Monument or other
                                        designated historic asset?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.affectListedBuilding}
                                    </Text>
                                </View>
                                {values.affectListedBuilding == "Yes" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(
                                                values.affectListedBuildingEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        25.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        Is any part of the site subject to a
                                        Tree Preservation Order?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.TPO}
                                    </Text>
                                </View>
                                {values.TPO == "Yes" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(values.TPOEvidence)}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        26.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        Is the site within or likely to affect
                                        an International or National Designated
                                        Site for nature conservation (as defined
                                        in Planning Policy Wales)?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.natureConservationSite}
                                    </Text>
                                </View>
                                {values.natureConservationSite == "Yes" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(
                                                values.natureConservationSiteEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        27.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        Are any protected species likely to be
                                        affected by the proposal?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.protectedSpecies}
                                    </Text>
                                </View>
                                {values.protectedSpecies == "Yes" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(
                                                values.protectedSpeciesEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>28.</Text>
                                <Text style={styles.questionTextMid}>
                                    Does the case involve persons claiming
                                    Gypsy/Traveller status, whether or not this
                                    is accepted by the LPA?
                                </Text>
                                <Text style={styles.questionAnswerMid}>
                                    {values.gypsyTravellerInvolvment}
                                </Text>
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        29.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        Is flooding an issue?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.floodingIssue}
                                    </Text>
                                </View>
                                {values.floodingIssue == "Yes" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(
                                                values.floodingIssueEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        30.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        Have you received comments or directions
                                        from any government department/agency or
                                        statutory undertaker, including in
                                        response to a statutory notification or
                                        consultation?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.governmentDepartmentComments}
                                    </Text>
                                </View>
                                {values.governmentDepartmentComments ==
                                    "Yes" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(
                                                values.governmentDepartmentCommentsEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>
                        </View>
                    </View>
                    <View>
                        <View
                            style={{
                                marginTop: 10,
                                fontFamily: "Helvetica-Bold",
                            }}
                        >
                            <Text style={{ fontSize: 14 }}>
                                Suggested considerations
                            </Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>31.</Text>
                                <Text style={styles.questionTextWide}>
                                    If there is an appeal on ground (a), review
                                    the following standard conditions and advise
                                    whether they would be necessary if
                                    permission is granted:
                                </Text>
                            </View>

                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        a)
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        The development shall be carried out in
                                        accordance with the following approved
                                        plans and documents:
                                        ............................ Reason: To
                                        ensure the development is carried out in
                                        accordance with the approved documents,
                                        plans and drawings submitted with the
                                        application.
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {
                                            values.developmentCarriedOutInAccordance
                                        }
                                    </Text>
                                </View>
                                {values.developmentCarriedOutInAccordance ==
                                    "Yes" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(
                                                values.developmentCarriedOutInAccordanceEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>b)</Text>
                                <Text style={styles.questionTextMid}>
                                    No development shall take place until a
                                    scheme for biodiversity enhancement has been
                                    submitted to and agreed in writing by the
                                    Local Planning Authority. Development shall
                                    be carried out in accordance with the
                                    approved details. Reason: In the interests
                                    of maintaining and enhancing biodiversity,
                                    in accordance with Future Wales Policy 9.
                                </Text>
                                <Text style={styles.questionAnswerMid}>
                                    {values.developmentNotTakePlaceBiodiversity}
                                </Text>
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>d)</Text>
                                <Text style={styles.questionTextMid}>
                                    No development shall take place until a
                                    scheme to enable the provision of gigabit
                                    capable broadband infrastructure from the
                                    site boundary to the dwellings/buildings
                                    hereby permitted has been submitted to and
                                    agreed in writing by the local planning
                                    authority. Development shall be carried out
                                    in accordance with the approved details.
                                    Reason: To support the roll-out of digital
                                    communications infrastructure across Wales
                                    in accordance with Policy 13 of Future
                                    Wales.
                                </Text>
                                <Text style={styles.questionAnswerMid}>
                                    {values.developmentNotTakePlaceBroadband}
                                </Text>
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        25.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        Do you consider other conditions, or
                                        amended versions of the above standard
                                        conditions, to be necessary?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.developmentAnyOtherConditions}
                                    </Text>
                                </View>
                                {values.developmentAnyOtherConditions ==
                                    "Yes" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(
                                                values.developmentAnyOtherConditionsEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>
                        </View>
                    </View>
                    <View>
                        <View
                            style={{
                                marginTop: 10,
                                fontFamily: "Helvetica-Bold",
                            }}
                        >
                            <Text style={{ fontSize: 14 }}>
                                Before sending, have you attached or provided a
                                web link to:
                            </Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        33.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        A true copy of the enforcement notice?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.copyOfEnforcementNotice}
                                    </Text>
                                </View>
                                <View style={styles.questionAnswerWide}>
                                    <Html style={styles.richArea}>
                                        {CleanHTML(
                                            values.copyOfEnforcementNoticeEvidence
                                        )}
                                    </Html>
                                </View>
                            </View>

                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        34.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        The enforcement notice plan.
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.enforcementNoticePlan}
                                    </Text>
                                </View>

                                <View style={styles.questionAnswerWide}>
                                    <Html style={styles.richArea}>
                                        {CleanHTML(
                                            values.enforcementNoticePlan
                                        )}
                                    </Html>
                                </View>
                            </View>

                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        35.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        A list of those served with the
                                        enforcement notice.
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.listOfNotifiedOfEnforcement}
                                    </Text>
                                </View>
                                <View style={styles.questionAnswerWide}>
                                    <Html style={styles.richArea}>
                                        {CleanHTML(
                                            values.listOfNotifiedOfEnforcementEvidence
                                        )}
                                    </Html>
                                </View>
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        36.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        A copy of the letter with which you
                                        notified people of the appeal AND a list
                                        of the people you notified?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {
                                            values.copyOfLetterOfAppealNotification
                                        }
                                    </Text>
                                </View>
                                <View style={styles.questionAnswerWide}>
                                    <Html style={styles.richArea}>
                                        {CleanHTML(
                                            values.copyOfLetterOfAppealNotificationEvidence
                                        )}
                                    </Html>
                                </View>
                            </View>

                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        37.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        The LPA’s Environmental Impact
                                        Assessment Screening Opinion and
                                        ‘Regulation 45 Notice’*, if applicable?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.lpaEIAOS}
                                    </Text>
                                </View>
                                {values.lpaEIAOS == "Yes" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(values.lpaEIAOSEvidence)}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        38.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        Details of other appeals or applications
                                        relating to the site, or a nearby site,
                                        which are still being considered by PEDW
                                        or the Welsh Ministers?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.detailsOfOtherAppeals}
                                    </Text>
                                </View>
                                {values.detailsOfOtherAppeals == "Yes" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(
                                                values.detailsOfOtherAppealsEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>

                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        39.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        Details of any previous appeal decision
                                        relating to the site or a nearby site
                                        referred to by the LPA or applicant?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.detailsOfPreviousAppeals}
                                    </Text>
                                </View>
                                {values.detailsOfPreviousAppeals == "Yes" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(
                                                values.detailsOfPreviousAppealsEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>

                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        40.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        Any other relevant information that we
                                        should know about?
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.otherRelevantInformation}
                                    </Text>
                                </View>
                                {values.otherRelevantInformation == "Yes" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(
                                                values.otherRelevantInformationEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>
                        </View>
                    </View>
                    <View>
                        <View
                            style={{
                                marginTop: 10,
                                fontFamily: "Helvetica-Bold",
                            }}
                        >
                            <Text>Declaration</Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                    alignItems: "center",
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                        alignItems: "center",
                                    }}
                                >
                                    <Text
                                        style={{ width: "40%", fontSize: 12 }}
                                    >
                                        Signed:
                                    </Text>
                                    <Text style={styles.questionAnswer}>
                                        {values.caseOfficer}
                                    </Text>
                                </View>
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                        alignItems: "center",
                                    }}
                                >
                                    <Text style={styles.questionText}>
                                        Date:
                                    </Text>
                                    <Text style={styles.questionAnswer}>
                                        {formatDates(values.signedDate)}
                                    </Text>
                                </View>
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={{ width: "18%", fontSize: 12 }}>
                                    On behalf of:
                                </Text>
                                <Text style={styles.questionAnswerWide}>
                                    {values.onBehalfOfLPA}
                                </Text>
                            </View>
                        </View>
                        <View>
                            <View
                                style={{
                                    marginTop: 10,
                                    fontFamily: "Helvetica-Bold",
                                }}
                            >
                                <Text style={{ fontSize: 14 }}>
                                    Supporting documents
                                </Text>
                            </View>
                            <View style={styles.sectionContainer}>
                                <View
                                    wrap={false}
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}></Text>
                                    <Text style={styles.questionText}>
                                        List of attached files
                                    </Text>
                                    <View
                                        style={[
                                            styles.questionAnswer,
                                            { flexDirection: "column" },
                                        ]}
                                    >
                                        {values.hasOwnProperty("filesList") &&
                                            values.filesList.map(function (p) {
                                                return (
                                                    <View
                                                        key={p.name}
                                                        style={{
                                                            flexDirection:
                                                                "row",
                                                            marginBottom: 4,
                                                        }}
                                                    >
                                                        <Text
                                                            styles={
                                                                styles.questionTextMid
                                                            }
                                                        >
                                                            {p.name} -{" "}
                                                            {bytesToSize(
                                                                p.size
                                                            )}{" "}
                                                            {"\n"}
                                                        </Text>
                                                    </View>
                                                );
                                            })}
                                    </View>
                                </View>
                            </View>
                        </View>
                        <View style={{ marginTop: 50, fontSize: 12 }}>
                            <Text>
                                * Regulation 45 of the Town and Country Planning
                                (Environmental Impact Assessment) (Wales)
                                Regulations 2017 (as amended).
                            </Text>
                        </View>
                    </View>
                </View>
                <Text
                    style={styles.pageNumber}
                    render={({ pageNumber, totalPages }) =>
                        `${pageNumber} / ${totalPages}`
                    }
                    fixed
                />
                <View
                    fixed
                    style={{
                        position: "absolute",
                        top: 20,
                        left: 20,
                        bottom: 20,
                        right: 20,
                        border: 1,
                        borderColor: "#eee",
                        padding: 20,
                        paddingTop: 30,
                        height: "100%",
                    }}
                ></View>
            </Page>
        </Document>
    );
};