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

import transLookupCY from "../../locales/cy/myrepresentations.json";
import transLookupEN from "../../locales/en/myrepresentations.json";

const getTrans = (locale, key) => {
    let jsonQuery = `$.${key}`;

    let jsonObj = locale == "cy" ? transLookupCY : transLookupEN;

    //console.log(locale, jsonObj[key]);
    return jsonObj[key];
};

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: "75%", fontSize: 12, marginRight: 10 },
    questionTextWide: { width: "95%", fontSize: 12, marginBottom: 5 },
    questionAnswer: {
        color: "#757575",
        width: "65%",
        fontSize: 12,
        padding: 5,
        border: 1,
        borderColor: "#eee",
        paddingLeft: 10,
        backgroundColor: "white",
    },
    questionAnswerSmall: {
        color: "#757575",
        width: "300",
        fontSize: 12,
        padding: 5,
        border: 1,
        borderColor: "#eee",
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor: "white",
        marginRight: 10,
    },
    questionAnswerSmaller: {
        color: "#757575",
        width: "90",
        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: "100%",
        fontSize: 12,
        border: 1,
        borderColor: "#eee",
        backgroundColor: "white",
        padding: 5,
    },

    questionAnswerFull: {
        color: "#757575",
        width: "100%",
        fontSize: 10,
        padding: 5,
        border: 1,
        borderColor: "#eee",
        backgroundColor: "white",
    },
    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 lpaQuestionnaire_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;
    //console.log("//////////////////////\n docprops:", docProps);
    let appealTypeValue = getFormCollectionByID(values.appealType);

    //console.log("sdffhjdhjdjdgkj: ", values.procedureType);

    Font.registerHyphenationCallback((word) => [word]);

    function CleanHTML(htmlStr) {
        let cleanStr =
            typeof htmlStr === "string"
                ? htmlStr.replace(
                      /<p><br><\/p>|<p class=\"ql-align-justify\"><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",
                                }}
                            >
                                {getTrans(
                                    docProps.locale,
                                    "lpa-questionnaire-heading"
                                )}
                            </Text>
                            <View>
                                <Text
                                    style={{
                                        width: "60%",
                                        fontSize: 15,
                                        marginTop: 20,
                                        fontFamily: "Helvetica-Bold",
                                    }}
                                >
                                    {getTrans(
                                        docProps.locale,
                                        "s78-heading-para-one"
                                    )}
                                </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 }}>
                            {getTrans(docProps.locale, "s78-heading-para-two")}
                        </Text>
                    </View>
                    <View style={styles.section}>
                        <View
                            style={{
                                marginTop: 10,
                                fontFamily: "Helvetica-Bold",
                            }}
                        >
                            <Text style={{ fontSize: 14 }}>
                                {getTrans(
                                    docProps.locale,
                                    "section-heading-zero"
                                )}
                            </Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>1.</Text>
                                <Text style={styles.questionText}>
                                    {getTrans(
                                        docProps.locale,
                                        "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}>
                                    {getTrans(
                                        docProps.locale,
                                        "s78-section-question-2"
                                    )}
                                </Text>
                                <Text style={styles.questionAnswer}>
                                    {values.pinswg_lpareference || " "}
                                </Text>
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>3.</Text>
                                <Text style={styles.questionText}>
                                    {getTrans(
                                        docProps.locale,
                                        "s78-section-question-3"
                                    )}
                                </Text>
                                <Text style={styles.questionAnswer}>
                                    {values.siteAddress}
                                </Text>
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>4.</Text>
                                <Text style={styles.questionText}>
                                    {getTrans(
                                        docProps.locale,
                                        "s78-section-question-4"
                                    )}
                                </Text>
                                <Text style={styles.questionAnswer}>
                                    {appealTypeValue.value}
                                </Text>
                            </View>
                        </View>
                    </View>
                    <View>
                        <View
                            style={{
                                marginTop: 10,
                                fontFamily: "Helvetica-Bold",
                            }}
                        >
                            <Text style={{ fontSize: 14 }}>
                                {getTrans(
                                    docProps.locale,
                                    "s78-section-heading-one"
                                )}
                            </Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                                // wrap={false}
                            >
                                <View
                                    wrap={false}
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        5.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-5"
                                        )}
                                    </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}>6.</Text>
                                <Text style={styles.questionTextMid}>
                                    {getTrans(
                                        docProps.locale,
                                        "s78-section-question-6"
                                    )}
                                </Text>
                                <Text style={styles.questionAnswerMid}>
                                    {values.enterToView}
                                </Text>
                            </View>

                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        7.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-7"
                                        )}
                                    </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,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        8.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-8"
                                        )}
                                    </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,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        9.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-9"
                                        )}
                                    </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,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        10.
                                    </Text>

                                    <Text style={styles.questionTextWide}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-10"
                                        )}
                                    </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 }}>
                                {getTrans(
                                    docProps.locale,
                                    "s78-section-heading-two"
                                )}
                            </Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                                // wrap={false}
                            >
                                <View
                                    wrap={false}
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        11.
                                    </Text>
                                    <Text style={styles.questionTextWide}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-11"
                                        )}
                                    </Text>
                                </View>
                                <View style={styles.questionAnswerWide}>
                                    <Html style={styles.richArea}>
                                        {CleanHTML(values.LPAcaseFileAndReps)}
                                    </Html>
                                </View>
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        12.
                                    </Text>
                                    <Text style={styles.questionTextWide}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-12"
                                        )}
                                    </Text>
                                </View>
                                <View style={styles.questionAnswerWide}>
                                    <Html style={styles.richArea}>
                                        {CleanHTML(values.LPAldpAndMap)}
                                    </Html>
                                </View>
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        13.
                                    </Text>
                                    <Text style={styles.questionTextWide}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-13"
                                        )}
                                    </Text>
                                </View>
                                <View style={styles.questionAnswerWide}>
                                    <Html style={styles.richArea}>
                                        {CleanHTML(values.LPAlocalGuidance)}
                                    </Html>
                                </View>
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>14.</Text>
                                <Text style={styles.questionTextMid}>
                                    {getTrans(
                                        docProps.locale,
                                        "s78-section-question-14"
                                    )}
                                </Text>
                                <Text style={styles.questionAnswerMid}>
                                    {values.LPAintentionToSubmitFullStatement ||
                                        ""}
                                </Text>
                            </View>
                        </View>
                    </View>
                    <View>
                        <View
                            style={{
                                marginTop: 10,
                                fontFamily: "Helvetica-Bold",
                            }}
                        >
                            <Text style={{ fontSize: 14 }}>
                                {getTrans(
                                    docProps.locale,
                                    "s78-section-heading-three"
                                )}
                            </Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>15.</Text>
                                <Text style={styles.questionTextMid}>
                                    {getTrans(
                                        docProps.locale,
                                        "s78-section-question-15"
                                    )}
                                </Text>
                                <Text style={styles.questionAnswerMid}>
                                    {values.AONB}
                                </Text>
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        16.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-16"
                                        )}
                                    </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,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        17.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-17"
                                        )}
                                    </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,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        18.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-18"
                                        )}
                                    </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,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        19.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-19"
                                        )}
                                    </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,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        20.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-20"
                                        )}
                                    </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,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        21.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-21"
                                        )}
                                    </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}>22.</Text>
                                <Text style={styles.questionTextMid}>
                                    {getTrans(
                                        docProps.locale,
                                        "s78-section-question-22"
                                    )}
                                </Text>
                                <Text style={styles.questionAnswerMid}>
                                    {values.gypsyTravellerInvolvment}
                                </Text>
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        23.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-23"
                                        )}
                                    </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 }}>
                                {getTrans(
                                    docProps.locale,
                                    "s78-section-heading-four"
                                )}
                            </Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>24.</Text>
                                <Text style={styles.questionTextWide}>
                                    {getTrans(
                                        docProps.locale,
                                        "s78-section-question-24"
                                    )}
                                </Text>
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}></Text>
                                <Text style={styles.questionTextMid}>
                                    {getTrans(
                                        docProps.locale,
                                        "s78-section-question-24a"
                                    )}
                                </Text>
                                <Text style={styles.questionAnswerMid}>
                                    {
                                        values.developmentNotBeginLaterThanFiveYears
                                    }
                                </Text>
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}></Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-24b"
                                        )}
                                    </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}></Text>
                                <Text style={styles.questionTextMid}>
                                    {getTrans(
                                        docProps.locale,
                                        "s78-section-question-24c"
                                    )}
                                </Text>
                                <Text style={styles.questionAnswerMid}>
                                    {values.developmentNotTakePlaceBiodiversity}
                                </Text>
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}></Text>
                                <Text style={styles.questionTextMid}>
                                    {getTrans(
                                        docProps.locale,
                                        "s78-section-question-24d"
                                    )}
                                </Text>
                                <Text style={styles.questionAnswerMid}>
                                    {values.developmentNotTakePlaceBroadband}
                                </Text>
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        25.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-25"
                                        )}
                                    </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",
                            }}
                            wrap={false}
                        >
                            <Text style={{ fontSize: 14 }}>
                                {getTrans(
                                    docProps.locale,
                                    "s78-section-heading-five-sub"
                                )}
                            </Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        26.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-26"
                                        )}
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.copyOfApplicantsCertificate}
                                    </Text>
                                </View>
                                {values.hasOwnProperty(
                                    "copyOfApplicantsCertificateEvidence"
                                ) && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(
                                                values.copyOfApplicantsCertificateEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        27.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-27"
                                        )}
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.advertismentGiven}
                                    </Text>
                                </View>
                                {values.hasOwnProperty(
                                    "advertismentGivenEvidence"
                                ) && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(
                                                values.advertismentGivenEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        28.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-28"
                                        )}
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {
                                            values.copyOfLetterOfAppealNotification
                                        }
                                    </Text>
                                </View>
                                {values.hasOwnProperty(
                                    "copyOfLetterOfAppealNotificationEvidence"
                                ) && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(
                                                values.copyOfLetterOfAppealNotificationEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        29.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-29"
                                        )}
                                    </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,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        30.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-30"
                                        )}
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {
                                            values.advertismentConsentDiscontinuanceNotice
                                        }
                                    </Text>
                                </View>
                                {values.advertismentConsentDiscontinuanceNotice ==
                                    "Yes" && (
                                    <View style={styles.questionAnswerWide}>
                                        <Html style={styles.richArea}>
                                            {CleanHTML(
                                                values.advertismentConsentDiscontinuanceNoticeEvidence
                                            )}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        31.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-31"
                                        )}
                                    </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,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        32.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-32"
                                        )}
                                    </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,
                                }}
                                // wrap={false}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        33.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-33"
                                        )}
                                    </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>
                                {" "}
                                {getTrans(
                                    docProps.locale,
                                    "s78-section-heading-seven"
                                )}
                            </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: "15%", fontSize: 12 }}
                                    >
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-signed"
                                        )}
                                    </Text>
                                    <Text
                                        style={{
                                            color: "#757575",
                                            width:
                                                docProps.locale == "cy"
                                                    ? "290"
                                                    : "310",
                                            fontSize: 12,
                                            padding: 5,
                                            border: 1,
                                            borderColor: "#eee",
                                            backgroundColor: "white",
                                            paddingRight: 10,
                                        }}
                                        wrap={true}
                                    >
                                        {values.caseOfficer}
                                    </Text>
                                </View>
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                        alignItems: "center",
                                    }}
                                >
                                    <Text
                                        style={{
                                            width:
                                                docProps.locale == "cy"
                                                    ? "60"
                                                    : "40",
                                            fontSize: 12,
                                            marginLeft: 10,
                                        }}
                                    >
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-date"
                                        )}
                                    </Text>
                                    <Text style={styles.questionAnswerSmaller}>
                                        {formatDates(values.signedDate)}
                                    </Text>
                                </View>
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                    alignItems: "center",
                                }}
                            >
                                <Text style={{ width: "18%", fontSize: 12 }}>
                                    {getTrans(
                                        docProps.locale,
                                        "s78-section-question-onbehalf"
                                    )}
                                </Text>
                                <Text style={styles.questionAnswerWide}>
                                    {values.onBehalfOfLPA}
                                </Text>
                            </View>
                        </View>
                        <View>
                            <View
                                style={{
                                    marginTop: 10,
                                    fontFamily: "Helvetica-Bold",
                                }}
                            >
                                <Text style={{ fontSize: 14 }}>
                                    {getTrans(
                                        docProps.locale,
                                        "lpa-list-supporting-documents-heading"
                                    )}
                                </Text>
                            </View>
                            <View style={styles.sectionContainer}>
                                <View
                                    wrap={false}
                                    style={{
                                        flexDirection: "column",
                                        marginBottom: 10,
                                    }}
                                >
                                    <View
                                        wrap={false}
                                        style={{
                                            flexDirection: "row",
                                            marginBottom: 10,
                                        }}
                                    >
                                        <Text style={styles.questionTextWide}>
                                            {getTrans(
                                                docProps.locale,
                                                "lpa-list-supporting-documents-list"
                                            )}
                                        </Text>
                                    </View>
                                    <View
                                        style={[
                                            styles.questionAnswerFull,
                                            { flexDirection: "column" },
                                        ]}
                                    >
                                        {values.hasOwnProperty("filesList") &&
                                            values.filesList.map(function (p) {
                                                return (
                                                    <View
                                                        key={p.name}
                                                        style={{
                                                            flexDirection:
                                                                "row",
                                                            marginBottom: 4,
                                                        }}
                                                    >
                                                        <Text
                                                            styles={
                                                                styles.questionAnswer
                                                            }
                                                        >
                                                            {p.name}
                                                            {"\n"}(
                                                            {bytesToSize(
                                                                p.contentLength ||
                                                                    p.size
                                                            )}
                                                            ){" "}
                                                        </Text>
                                                    </View>
                                                );
                                            })}
                                    </View>
                                </View>
                            </View>
                        </View>
                        {/* <View style={{ marginTop: 50, fontSize: 12 }}>
                            <Text>
                                {getTrans(docProps.locale, "s78-footnote-one")}
                            </Text>
                            <Text style={{ marginTop: 20 }}>
                                {getTrans(docProps.locale, "s78-footnote-two")}{" "}
                            </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>
    );
};