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

import _ from "lodash";
import { DOMParser, XMLSerializer } from "@xmldom/xmldom";
import { AppealRow_pdf } from "./appealRow_pdf";

import transLookupCY from "../../locales/cy/newappeal.json";
import transLookupEN from "../../locales/en/newappeal.json";
import transLookup from "../../data/lookuptranslations.json";
import fieldLookup from "../../data/crmfieldlookuptranslations.json";
import { JSONPath as jsonpath } from "jsonpath-plus";
import resolveCrmDisplayValue from "../../lib/i18n/crmDisplay/resolveCrmDisplayValue";

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: "35%",
        fontSize: 12,
        fontFamily: "Helvetica-Bold"
    },
    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: "100%",
        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 planningappeals78_pdf = ({ docProps, pickListData }) => {
    //console.log("----", docProps);
    const locale = docProps.locale;
    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 = datestr[2] + "/" + datestr[1] + "/" + datestr[0];
    // let appealTypeValue = getFormCollectionByID(values.pinswg_appealcasetype);

    var path = require("path");
    const configDirectory = path.resolve(process.cwd(), "data/formsxml");
    var xmlStr = fs.readFileSync(
        path.join(configDirectory, "planningappeals78" + ".xml"),
        "utf8"
    );

    xmlStr = xmlStr.replace(/\t/g, "");
    xmlStr = xmlStr.replace(/\n/g, "");
    xmlStr = xmlStr.replace(/> <"/g, "><");
    xmlStr = xmlStr.toString();

    //console.log(xmlStr);

    const parser = new DOMParser();
    var doc = parser.parseFromString(xmlStr, "text/xml");
    var titles = xpath.select(
        "//form/tabs/tab[*]/labels/label/@description",
        doc
    );
    var rowXML = xpath.select(
        "/form/tabs/tab[*]/columns//sections/section/rows/row",
        doc
    );

    var titleList = xpath.select(
        "//form/tabs/tab[*]/labels/label/@description",
        doc
    );

    //console.log("\n//////////\n The Case:\n", docProps.caseObj);

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

    const FieldsTranslations = (label, locale) => {
        const appealtypes = getFormCollectionByID(
            docProps.caseObj.pinswg_appealcasetype
        ).UrlName;

        const formObj = jsonpath({
            path: `$['${appealtypes}'].[?(@.value=="${label}")]`,
            json: fieldLookup,
            eval: true
        });

        const item = formObj?.[0];

        if (locale === "cy" && !item?.value_cy) {
            console.warn(`[Missing Welsh translation]`, {
                label: item?.value,
                orig: label,
                appealType: appealtypes
            });
        }

        return locale === "cy"
            ? (item?.value_cy ?? item?.value ?? label)
            : (item?.value ?? label);
    };

    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(locale, "pdf-s78-heading")}
                            </Text>
                            <View>
                                <Text
                                    style={{
                                        width: "60%",
                                        fontSize: 15,
                                        marginTop: 20,
                                        fontFamily: "Helvetica-Bold"
                                    }}
                                >
                                    {" "}
                                    {getTrans(
                                        locale,
                                        "pdf-s78-header-paragraph"
                                    )}
                                </Text>
                            </View>
                        </View>
                        <Image
                            style={styles.logoImage}
                            src="public/assets/images/pedw_logo.png"
                            alt="PEDW Logo"
                        />
                    </View>

                    {Object.keys(titles).map(
                        (key) =>
                            key != 0 && (
                                <View key={key}>
                                    <View
                                        style={{
                                            marginTop: 10,
                                            fontFamily: "Helvetica-Bold"
                                        }}
                                    >
                                        <Text style={{ fontSize: 14 }}>
                                            {parseInt(key)}{" "}
                                            {FieldsTranslations(
                                                titles[key].value,
                                                locale
                                            )}
                                        </Text>
                                        <View style={styles.sectionContainer}>
                                            <View
                                                style={{
                                                    flexDirection: "row",
                                                    marginBottom: 10
                                                }}
                                            >
                                                <View
                                                    style={{
                                                        flexDirection: "column",
                                                        marginBottom: 10
                                                    }}
                                                >
                                                    <AppealRow_pdf
                                                        formXML={xmlStr}
                                                        whichSection={
                                                            parseInt(key) + 1
                                                        }
                                                        sectionCount={key}
                                                        props={docProps}
                                                        key={key}
                                                        mandatoryFieldsData={
                                                            null
                                                        }
                                                        pickListData={
                                                            pickListData
                                                        }
                                                        filesList={
                                                            values.filesList
                                                        }
                                                    />
                                                </View>
                                            </View>
                                        </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>
            <Page size="A4" style={styles.page} wrap>
                <View>
                    <View
                        style={{
                            marginTop: 10,
                            fontFamily: "Helvetica-Bold"
                        }}
                    >
                        <Text style={{ fontSize: 14 }}>
                            {" "}
                            {getTrans(locale, "pdf-s78-heading")}
                        </Text>
                        <View style={styles.sectionContainer}>
                            <View
                                wrap={false}
                                style={{
                                    flexDirection: "row",
                                    marginBottom: 10
                                }}
                            >
                                <View
                                    style={{
                                        flexDirection: "column",
                                        marginBottom: 10
                                    }}
                                >
                                    <View
                                        wrap={false}
                                        style={{
                                            flexDirection: "row",
                                            marginBottom: 10
                                        }}
                                    >
                                        <Text style={styles.questionText}>
                                            {getTrans(
                                                locale,
                                                "pdf-case-details-label-1"
                                            )}
                                        </Text>
                                        <Text style={styles.questionAnswer}>
                                            {" "}
                                            {values.caseObj.pinswg_onbehalfof}
                                        </Text>
                                    </View>
                                    <View
                                        wrap={false}
                                        style={{
                                            flexDirection: "row",
                                            marginBottom: 10
                                        }}
                                    >
                                        <Text style={styles.questionText}>
                                            {getTrans(
                                                locale,
                                                "pdf-case-details-label-2"
                                            )}
                                        </Text>
                                        <Text style={styles.questionAnswer}>
                                            {" "}
                                            {values.caseObj
                                                .pinswg_appellantagent ==
                                            "846040000"
                                                ? locale == "cy"
                                                    ? "Apelydd"
                                                    : "Appellant"
                                                : locale == "cy"
                                                  ? "Asiant"
                                                  : "Agent"}
                                        </Text>
                                    </View>
                                    <View
                                        wrap={false}
                                        style={{
                                            flexDirection: "row",
                                            marginBottom: 10
                                        }}
                                    >
                                        <Text style={styles.questionText}>
                                            {getTrans(
                                                locale,
                                                "pdf-case-details-label-3"
                                            )}
                                        </Text>
                                        <Text style={styles.questionAnswer}>
                                            {values.caseObj
                                                .pinswg_appellantfirstname +
                                                " " +
                                                values.caseObj
                                                    .pinswg_appellantlastname}
                                        </Text>
                                    </View>
                                    <View
                                        wrap={false}
                                        style={{
                                            flexDirection: "row",
                                            marginBottom: 10
                                        }}
                                    >
                                        <Text style={styles.questionText}>
                                            {getTrans(
                                                locale,
                                                "pdf-case-details-label-4"
                                            )}
                                        </Text>
                                        <Text style={styles.questionAnswer}>
                                            {
                                                values.caseObj
                                                    .pinswg_appellantemailaddress
                                            }
                                        </Text>
                                    </View>
                                    <View
                                        wrap={false}
                                        style={{
                                            flexDirection: "row",
                                            marginBottom: 10
                                        }}
                                    >
                                        <Text style={styles.questionText}>
                                            {getTrans(
                                                locale,
                                                "pdf-case-details-label-5"
                                            )}
                                        </Text>
                                        <Text style={styles.questionAnswer}>
                                            {
                                                values.caseObj
                                                    .pinswg_appellantaddress
                                            }
                                        </Text>
                                    </View>
                                    <View
                                        wrap={false}
                                        style={{
                                            flexDirection: "row",
                                            marginBottom: 10
                                        }}
                                    >
                                        <Text style={styles.questionText}>
                                            {getTrans(
                                                locale,
                                                "pdf-case-details-label-6"
                                            )}
                                        </Text>
                                        <Text style={styles.questionAnswer}>
                                            {" "}
                                            {
                                                values.caseObj
                                                    .pinswg_appellantphonenumber
                                            }
                                        </Text>
                                    </View>
                                    <View
                                        wrap={false}
                                        style={{
                                            flexDirection: "row",
                                            marginBottom: 10
                                        }}
                                    >
                                        <Text style={styles.questionText}>
                                            {getTrans(
                                                locale,
                                                "pdf-case-details-label-8"
                                            )}
                                        </Text>
                                        <Text style={styles.questionAnswer}>
                                            {" "}
                                            {values.caseObj
                                                .pinswg_languagepreference ==
                                            "846040000"
                                                ? locale == "cy"
                                                    ? "Saesneg"
                                                    : "English"
                                                : locale == "cy"
                                                  ? "Cymraeg"
                                                  : "Welsh"}
                                        </Text>
                                    </View>
                                    {values.caseObj.pinswg_appellantagent !=
                                        "846040000" && (
                                        <>
                                            <View
                                                wrap={false}
                                                style={{
                                                    flexDirection: "row",
                                                    marginBottom: 10
                                                }}
                                            >
                                                <Text
                                                    style={styles.questionText}
                                                >
                                                    {getTrans(
                                                        locale,
                                                        "pdf-case-details-agent-label-1"
                                                    )}
                                                </Text>
                                                <Text
                                                    style={
                                                        styles.questionAnswer
                                                    }
                                                >
                                                    {
                                                        values.caseObj
                                                            .pinswg_agentcompanyname
                                                    }
                                                </Text>
                                            </View>
                                            <View
                                                wrap={false}
                                                style={{
                                                    flexDirection: "row",
                                                    marginBottom: 10
                                                }}
                                            >
                                                <Text
                                                    style={styles.questionText}
                                                >
                                                    {getTrans(
                                                        locale,
                                                        "pdf-case-details-agent-label-2"
                                                    )}
                                                </Text>
                                                <Text
                                                    style={
                                                        styles.questionAnswer
                                                    }
                                                >
                                                    {
                                                        values.caseObj
                                                            .pinswg_agentfirstname
                                                    }{" "}
                                                    {
                                                        values.caseObj
                                                            .pinswg_agentlastname
                                                    }
                                                </Text>
                                            </View>
                                            <View
                                                wrap={false}
                                                style={{
                                                    flexDirection: "row",
                                                    marginBottom: 10
                                                }}
                                            >
                                                <Text
                                                    style={styles.questionText}
                                                >
                                                    {getTrans(
                                                        locale,
                                                        "pdf-case-details-agent-label-3"
                                                    )}
                                                </Text>
                                                <Text
                                                    style={
                                                        styles.questionAnswer
                                                    }
                                                >
                                                    {
                                                        values.caseObj
                                                            .pinswg_agentemailaddress
                                                    }
                                                </Text>
                                            </View>
                                            <View
                                                wrap={false}
                                                style={{
                                                    flexDirection: "row",
                                                    marginBottom: 10
                                                }}
                                            >
                                                <Text
                                                    style={styles.questionText}
                                                >
                                                    {getTrans(
                                                        locale,
                                                        "pdf-case-details-agent-label-4"
                                                    )}
                                                </Text>
                                                <Text
                                                    style={
                                                        styles.questionAnswer
                                                    }
                                                >
                                                    {
                                                        values.caseObj
                                                            .pinswg_agentaddress
                                                    }
                                                </Text>
                                            </View>
                                            <View
                                                wrap={false}
                                                style={{
                                                    flexDirection: "row",
                                                    marginBottom: 10
                                                }}
                                            >
                                                <Text
                                                    style={styles.questionText}
                                                >
                                                    {getTrans(
                                                        locale,
                                                        "pdf-case-details-agent-label-5"
                                                    )}
                                                </Text>
                                                <Text
                                                    style={
                                                        styles.questionAnswer
                                                    }
                                                >
                                                    {
                                                        values.caseObj
                                                            .pinswg_agentphonenumber
                                                    }
                                                </Text>
                                            </View>
                                            <View
                                                wrap={false}
                                                style={{
                                                    flexDirection: "row",
                                                    marginBottom: 10
                                                }}
                                            >
                                                <Text
                                                    style={styles.questionText}
                                                >
                                                    {getTrans(
                                                        locale,
                                                        "pdf-case-details-agent-label-6"
                                                    )}
                                                </Text>
                                                <Text
                                                    style={
                                                        styles.questionAnswer
                                                    }
                                                >
                                                    {values.caseObj
                                                        .pinswg_agentlanguagepreference ==
                                                    "846040000"
                                                        ? locale == "cy"
                                                            ? "Saesneg"
                                                            : "English"
                                                        : locale == "cy"
                                                          ? "Cymraeg"
                                                          : "Welsh"}
                                                </Text>
                                            </View>
                                        </>
                                    )}
                                    <View
                                        wrap={false}
                                        style={{
                                            flexDirection: "row",
                                            marginBottom: 10
                                        }}
                                    >
                                        <Text style={styles.questionText}>
                                            {getTrans(
                                                locale,
                                                "pdf-case-details-label-7"
                                            )}
                                        </Text>
                                        <Text style={styles.questionAnswer}>
                                            {resolveCrmDisplayValue({
                                                value: values.caseObj
                                                    .pinswg_lpaname,
                                                locale,
                                                translations: transLookup
                                            })}
                                        </Text>
                                    </View>
                                    {/* <View
                                        wrap={false}
                                        style={{
                                            flexDirection: "row",
                                            marginBottom: 10,
                                        }}
                                    >
                                        <Text style={styles.questionText}>
                                            Contact Preference
                                        </Text>
                                        <Text style={styles.questionAnswer}>
                                            {values.caseObj
                                                .pinswg_contactprefs ==
                                            "846040000"
                                                ? "Email"
                                                : "Post"}
                                        </Text>
                                    </View> */}
                                </View>
                            </View>
                        </View>
                    </View>
                </View>
            </Page>
        </Document>
    );
};