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: "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 statement_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];
    let appealTypeValue = getFormCollectionByID(values.appealType);
    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>/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,
                                    "statement-statement-label"
                                )}
                            </Text>
                            <View>
                                <Text
                                    style={{
                                        width: "60%",
                                        fontSize: 15,
                                        marginTop: 20,
                                        fontFamily: "Helvetica-Bold",
                                    }}
                                >
                                    {/* For Planning, Conservation area, Listed
                                    Building and Advertisement
                                    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 }}>
                                {getTrans(
                                    docProps.locale,
                                    "statement-case-details-header"
                                )}
                            </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,
                                        "statement-representation-capacity-label"
                                    )}
                                    :{" "}
                                </Text>
                                <Text style={styles.questionAnswer}>
                                    {values.representationCapacity}
                                </Text>
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>3.</Text>
                                <Text style={styles.questionText}>
                                    {getTrans(
                                        docProps.locale,
                                        "statement-representation-capacity-details-label"
                                    )}
                                    :
                                </Text>
                                <Text style={styles.questionAnswer}>
                                    <Html style={styles.richArea}>
                                        {CleanHTML(
                                            values.conditional_representationCapacity_Comments
                                        )}
                                    </Html>
                                </Text>
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            ></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-3"
                                    )}
                                </Text>
                                <Text style={styles.questionAnswer}>
                                    {values.siteAddress}
                                </Text>
                            </View>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>5.</Text>
                                <Text style={styles.questionText}>
                                    {getTrans(
                                        docProps.locale,
                                        "statement-case-type-label"
                                    )}
                                    :
                                </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,
                                    "statement-comments-header"
                                )}
                            </Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                style={{
                                    flexDirection: "column",
                                    marginBottom: 10,
                                }}
                            >
                                <View
                                    wrap={false}
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text style={styles.questionBullet}>
                                        6.
                                    </Text>
                                    <Text style={styles.questionTextMid}>
                                        {getTrans(
                                            docProps.locale,
                                            "statement-statement-label"
                                        )}
                                    </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 }}>
                                {getTrans(
                                    docProps.locale,
                                    "statement-supporting-documents-header"
                                )}
                            </Text>
                        </View>
                        <View style={styles.sectionContainer}>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10,
                                }}
                            >
                                <Text style={styles.questionBullet}>7.</Text>
                                <Text style={styles.questionText}>
                                    {getTrans(
                                        docProps.locale,
                                        "statement-list-of-attached-files-label"
                                    )}
                                </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>
                                {getTrans(
                                    docProps.locale,
                                    "statement-declaration-header"
                                )}
                            </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,
                                            "statement-signed-label"
                                        )}
                                        :
                                    </Text>
                                    <Text style={styles.questionAnswer}>
                                        {values.firstname} {values.lastname}
                                    </Text>
                                </View>
                                <View
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                        alignItems: "center",
                                    }}
                                >
                                    <Text style={styles.questionText}>
                                        {getTrans(
                                            docProps.locale,
                                            "statement-date-label"
                                        )}
                                        :
                                    </Text>
                                    <Text style={styles.questionAnswer}>
                                        {signedDate}
                                    </Text>
                                </View>
                            </View>
                            {values.hasOwnProperty(
                                "representationOnBehalfOf_details"
                            ) ? (
                                <View
                                    wrap={false}
                                    style={{
                                        flexDirection: "row",
                                        marginBottom: 10,
                                    }}
                                >
                                    <Text
                                        style={{ width: "18%", fontSize: 12 }}
                                    >
                                        {getTrans(
                                            docProps.locale,
                                            "statement-onbehalf-label"
                                        )}
                                        :
                                    </Text>
                                    <Text style={styles.questionAnswerWide}>
                                        {values.hasOwnProperty(
                                            "representationOnBehalfOf_details"
                                        )
                                            ? values.representationOnBehalfOf_details
                                            : ""}
                                    </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>
    );
};