import ReactPDF, {
    Document,
    Page,
    Text,
    View,
    Image,
    StyleSheet,
    PDFViewer,
    Font,
} from "@react-pdf/renderer";
import Html from "react-pdf-html";
import { getFormCollectionByID } from "../../components/utils";
import getT from "next-translate/getT";
import useTranslation from "next-translate/useTranslation";

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

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: "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,
        color: "red",
        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;
    let appealTypeValue = getFormCollectionByID(values.appealType);

    console.log("sdffhjdhjdjdgkj: ", values.procedureType);
    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.lpaRef}
                                </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,
                                }}
                            >
                                <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}>
                                            {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,
                                }}
                            >
                                <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 }}>
                                            {
                                                values.enterNeighbouringLandToViewSiteEvidence
                                            }
                                        </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}>
                                        {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}>
                                            {
                                                values.enterNeighbouringLandAccessRequiredEvidence
                                            }
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <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}>
                                            {
                                                values.healthAndSafetyIssuesEvidence
                                            }
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <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}>
                                        {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
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>11.</Text>
                                <Text style={styles.questionText}>
                                    {getTrans(
                                        docProps.locale,
                                        "s78-section-question-11"
                                    )}
                                </Text>
                                <View style={styles.questionAnswer}>
                                    <Html style={styles.richArea}>
                                        {values.LPAcaseFileAndReps}
                                    </Html>
                                </View>
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>12.</Text>
                                <Text style={styles.questionText}>
                                    {getTrans(
                                        docProps.locale,
                                        "s78-section-question-12"
                                    )}
                                </Text>
                                <View style={styles.questionAnswer}>
                                    <Html style={styles.richArea}>
                                        {values.LPAldpAndMap}
                                    </Html>
                                </View>
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>13.</Text>
                                <Text style={styles.questionText}>
                                    {getTrans(
                                        docProps.locale,
                                        "s78-section-question-13"
                                    )}
                                </Text>
                                <View style={styles.questionAnswer}>
                                    <Html style={styles.richArea}>
                                        {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,
                                }}
                            >
                                <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}>
                                            {values.ROWEvidence}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <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}>
                                            {values.conservationAreaEvidence}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <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}>
                                            {
                                                values.affectListedBuildingEvidence
                                            }
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <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}>
                                            {values.TPOEvidence}
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <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}>
                                            {
                                                values.natureConservationSiteEvidence
                                            }
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <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}>
                                            {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,
                                }}
                            >
                                <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}>
                                            {
                                                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}>a)</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,
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        b)
                                    </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}>
                                            {
                                                values.developmentCarriedOutInAccordanceEvidence
                                            }
                                        </Html>
                                    </View>
                                )}
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>c)</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}>d)</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,
                                }}
                            >
                                <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}>
                                            {
                                                values.developmentAnyOtherConditionsEvidence
                                            }
                                        </Html>
                                    </View>
                                )}
                            </View>
                        </View>
                    </View>
                    <View>
                        <View
                            style={{
                                marginTop: 10,
                                fontFamily: "Helvetica-Bold",
                            }}
                        >
                            <Text style={{ fontSize: 14 }}>
                                {getTrans(
                                    docProps.locale,
                                    "s78-section-heading-five"
                                )}
                            </Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <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>
                                <View style={styles.questionAnswerWide}>
                                    <Html style={styles.richArea}>
                                        {
                                            values.copyOfApplicantsCertificateEvidence
                                        }
                                    </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}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-27"
                                        )}
                                    </Text>
                                    <Text style={styles.questionAnswerMid}>
                                        {values.advertismentGiven}
                                    </Text>
                                </View>

                                <View style={styles.questionAnswerWide}>
                                    <Html style={styles.richArea}>
                                        {values.advertismentGivenEvidence}
                                    </Html>
                                </View>
                            </View>

                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <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>
                                <View style={styles.questionAnswerWide}>
                                    <Html style={styles.richArea}>
                                        {
                                            values.copyOfLetterOfAppealNotificationEvidence
                                        }
                                    </Html>
                                </View>
                            </View>

                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <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}>
                                            {values.lpaEIAOSEvidence}
                                        </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}>
                                        {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}>
                                            {
                                                values.advertismentConsentDiscontinuanceNoticeEvidence
                                            }
                                        </Html>
                                    </View>
                                )}
                            </View>

                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <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}>
                                            {
                                                values.detailsOfOtherAppealsEvidence
                                            }
                                        </Html>
                                    </View>
                                )}
                            </View>

                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <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}>
                                            {
                                                values.detailsOfPreviousAppealsEvidence
                                            }
                                        </Html>
                                    </View>
                                )}
                            </View>

                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <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}>
                                            {
                                                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: "40%", fontSize: 12 }}
                                    >
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-signed"
                                        )}
                                    </Text>
                                    <Text style={styles.questionAnswer}>
                                        {values.caseOfficer}
                                    </Text>
                                </View>
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                        alignItems: "center",
                                    }}
                                >
                                    <Text style={styles.questionText}>
                                        {getTrans(
                                            docProps.locale,
                                            "s78-section-question-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 }}>
                                    {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: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}></Text>
                                    <Text style={styles.questionText}>
                                        {getTrans(
                                            docProps.locale,
                                            "lpa-list-supporting-documents-list"
                                        )}
                                    </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} - {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>
    );
};