import ReactPDF, {
    Document,
    Page,
    Text,
    View,
    Image,
    StyleSheet,
    PDFViewer,
    Font,
} from "@react-pdf/renderer";
import { createElement } from "react";
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";
import { JSONPath as jsonpath } from "jsonpath-plus";

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,
        flexDirection: "column",
    },
});

export const other_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 datestr = values.pinswg_name.split("-");
    let signedDate = formatDates(new Date()); // datestr[2] + "/" + datestr[1] + "/" + datestr[0];
    const isLPA =
        values.representationCapacity == "lpa" ||
        values.representationCapacity == "LPA"
            ? true
            : false;
    let filterFilesList = values.hasOwnProperty("filesList")
        ? values.filesList.filter(function (el) {
              return el != null;
          })
        : [];

    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",
                                }}
                            >
                                Other
                            </Text>
                            <View>
                                <Text
                                    style={{
                                        width: "60%",
                                        fontSize: 15,
                                        marginTop: 20,
                                        fontFamily: "Helvetica-Bold",
                                    }}
                                >
                                    For Planning Appeal, Planning Conditions,
                                    Listed Building and Conservation Area
                                    Appeal, Lawful Development Appeal, Planning
                                    Obligations, Community Infrastructure Levy,
                                    Enforcement Notice appeal, Enforcement
                                    Listed Building Appeal, Maintenance of land,
                                    Called in Application applications/appeals
                                </Text>
                            </View>
                        </View>
                        <Image
                            style={styles.logoImage}
                            src="public/assets/images/pedw_logo.png"
                            alt="PEDW Logo"
                        />
                    </View>

                    <View style={styles.section}>
                        <View
                            style={{
                                marginTop: 10,
                                fontFamily: "Helvetica-Bold",
                            }}
                        >
                            <Text style={{ fontSize: 14 }}>Case details</Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>1.</Text>
                                <Text style={styles.questionText}>
                                    {getTrans(
                                        docProps.locale,
                                        "s78-section-question-1"
                                    )}
                                </Text>
                                <Text style={styles.questionAnswer}>
                                    {values.caseRef}
                                </Text>
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            ></View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>3.</Text>
                                <Text style={styles.questionText}>
                                    Site address/grid ref:
                                </Text>
                                <Text style={styles.questionAnswer}>
                                    {values.siteAddress}
                                </Text>
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>4.</Text>
                                <Text style={styles.questionText}>
                                    Case Type:
                                </Text>
                                <Text style={styles.questionAnswer}>
                                    {
                                        getFormCollectionByID(values.appealType)
                                            .value
                                    }
                                </Text>
                            </View>
                        </View>
                    </View>
                    <View>
                        <View
                            style={{
                                marginTop: 10,
                                fontFamily: "Helvetica-Bold",
                            }}
                        >
                            <Text style={{ fontSize: 14 }}>Comments</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}>
                                        Other Comments
                                    </Text>
                                </View>
                                <View style={styles.questionAnswerWide}>
                                    <Html style={styles.richArea}>
                                        {CleanHTML(
                                            values.representationComments
                                        )}
                                    </Html>
                                </View>
                            </View>
                        </View>
                    </View>
                    <View>
                        <View
                            style={{
                                marginTop: 10,
                                fontFamily: "Helvetica-Bold",
                            }}
                        >
                            <Text style={{ fontSize: 14 }}>
                                Supporting documents
                            </Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>11.</Text>
                                <Text style={styles.questionText}>
                                    List of attached files
                                </Text>
                                <View
                                    style={[
                                        styles.questionAnswer,
                                        { flexDirection: "column" },
                                    ]}
                                >
                                    {values.hasOwnProperty("filesList") &&
                                        filterFilesList.map(function (p) {
                                            return (
                                                <View
                                                    key={p.name}
                                                    style={{
                                                        flexDirection: "row",
                                                        marginBottom: 4,
                                                    }}
                                                >
                                                    <Text
                                                        styles={
                                                            styles.questionTextMid
                                                        }
                                                    >
                                                        {p.name} -{" "}
                                                        {bytesToSize(p.size)}{" "}
                                                        {"\n"}
                                                    </Text>
                                                </View>
                                            );
                                        })}
                                </View>
                            </View>
                        </View>
                    </View>
                    <View>
                        <View
                            style={{
                                marginTop: 10,
                                fontFamily: "Helvetica-Bold",
                            }}
                        >
                            <Text>Declaration</Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                    alignItems: "center",
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                        alignItems: "center",
                                    }}
                                >
                                    <Text
                                        style={{ width: "40%", fontSize: 12 }}
                                    >
                                        Signed:
                                    </Text>
                                    <Text style={styles.questionAnswer}>
                                        {values.firstname} {values.lastname}
                                    </Text>
                                </View>
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                        alignItems: "center",
                                    }}
                                >
                                    <Text style={styles.questionText}>
                                        Date:
                                    </Text>
                                    <Text style={styles.questionAnswer}>
                                        {signedDate}
                                    </Text>
                                </View>
                            </View>
                            {isLPA && (
                                <View
                                    wrap={false}
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text
                                        style={{ width: "18%", fontSize: 12 }}
                                    >
                                        On behalf of:
                                    </Text>
                                    <Text style={styles.questionAnswerWide}>
                                        {values.representationCapacity}
                                    </Text>
                                </View>
                            )}
                        </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>
    );
};