import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import xpath from "xpath";
import jsonpath from "jsonpath";
import { useSelector, shallowEqual, connect } from "react-redux";
import fieldLookup from "../../data/crmfieldlookuptranslations.json";
import {
    getFormCollectionByID,
    getPickListLabel,
    getRadioLabel,
} from "../../components/utils";

import ReactPDF, {
    Document,
    Page,
    Text,
    View,
    Image,
    StyleSheet,
    PDFViewer,
    Font,
} from "@react-pdf/renderer";
import _ from "lodash";
import Html from "react-pdf-html";

import { DOMParser, XMLSerializer } from "@xmldom/xmldom";

export const AppealRow_pdf = (props) => {
    let { t } = useTranslation();

    // const router = useRouter();
    // console.log(router);
    // const { locale } = router;

    const {
        formXML,
        whichSection,
        sectionCount,
        onSubmit,
        updateCurrentSection,
        mandatoryFieldsData,
    } = props;

    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,
            marginRight: 5,
        },
        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,
            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",
        },
    });

    const parser = new DOMParser();
    var doc = parser.parseFromString(formXML, "text/xml");

    var rowXML = xpath.select(
        "/form/tabs/tab[" +
            whichSection +
            "]/columns//sections/section/rows/row",
        doc
    );

    //console.log(rowXML);

    function formatDate(dateObj) {
        var m = new Date(dateObj);
        var dateString;
        dateObj != null
            ? (dateString =
                  ("0" + m.getDate()).slice(-2) +
                  "/" +
                  ("0" + (m.getMonth() + 1)).slice(-2) +
                  "/" +
                  m.getFullYear())
            : (dateString = "");

        return dateString;
    }

    const FieldsTranslations = (label) => {
        // const router = useRouter();
        // const { locale } = router;
        const { appealtypes } = router.query;

        let formObj = jsonpath.query(fieldLookup, "$['" + appealtypes + "']");

        // let labelTrans =
        //     router.locale == "cy"
        //         ? jsonpath.query(
        //               formObj,
        //               "$..[?(@.value=='" + label + "')].value_cy"
        //           )
        //         : label;

        let labelTrans = label;
        return labelTrans;
    };

    return (
        <>
            {Object.keys(rowXML).map((key, index) => {
                var newRowXML = new XMLSerializer().serializeToString(
                    rowXML[key]
                );
                //console.log(newRowXML);
                var doc = parser.parseFromString(newRowXML, "text/xml");

                var rows = xpath.select("//label/@description", doc);
                var fieldtype = xpath.select("//@classid", doc);
                var datafieldname = xpath.select("//@datafieldname", doc);

                var datafieldcontent = xpath.select("//@datafieldcontent", doc);

                console.log(datafieldname[0].value);

                return (
                    <>
                        {(() => {
                            switch (fieldtype[0].value) {
                                case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
                                    return (
                                        <View
                                            style={{
                                                flexDirection: "row",
                                                marginBottom: 10,
                                            }}
                                        >
                                            <Text
                                                style={styles.questionTextWide}
                                            >
                                                {/* {FieldsTranslations(rows[0].value)} */}
                                                {rows[0].value}
                                            </Text>

                                            <Text
                                                style={
                                                    styles.questionAnswerWide
                                                }
                                            >
                                                {formatDate(
                                                    props.props[
                                                        datafieldname[0].value
                                                    ]
                                                )}{" "}
                                            </Text>
                                        </View>
                                    );
                                    break;
                                case "{E0DECE4B-6FC8-4a8f-A065-082708572369}":
                                    return (
                                        <View
                                            style={{
                                                flexDirection: "column",
                                                marginBottom: 10,
                                            }}
                                        >
                                            <View
                                                wrap={false}
                                                style={{
                                                    flexDirection: "row",
                                                    marginBottom: 10,
                                                }}
                                            >
                                                <Text
                                                    style={
                                                        styles.questionTextMid
                                                    }
                                                >
                                                    {rows[0].value}
                                                </Text>
                                            </View>
                                            <View
                                                style={
                                                    styles.questionAnswerWide
                                                }
                                            >
                                                <Text>
                                                    {
                                                        props.props[
                                                            datafieldname[0]
                                                                .value
                                                        ]
                                                    }
                                                </Text>
                                            </View>
                                        </View>
                                    );
                                    break;
                                case "{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
                                    var fieldCopy = datafieldcontent[0].value
                                        .split(",")
                                        .find((a) =>
                                            a.includes(
                                                props.props[
                                                    datafieldname[0].value
                                                ]
                                            )
                                        );

                                    fieldCopy =
                                        typeof fieldCopy != "undefined"
                                            ? fieldCopy.split("|")[1]
                                            : fieldCopy;

                                    const transData = require("../../locales/en/" +
                                        (typeof fieldCopy != "undefined"
                                            ? fieldCopy.split(":")[0]
                                            : "common") +
                                        ".json");

                                    let transCopy =
                                        typeof fieldCopy != "undefined"
                                            ? transData[fieldCopy.split(":")[1]]
                                            : fieldCopy;

                                    return (
                                        <View
                                            style={{
                                                flexDirection: "column",
                                                marginBottom: 10,
                                            }}
                                        >
                                            <View
                                                wrap={false}
                                                style={{
                                                    flexDirection: "row",
                                                    marginBottom: 10,
                                                }}
                                            >
                                                <Text
                                                    style={
                                                        styles.questionTextWide
                                                    }
                                                >
                                                    {rows[0].value}{" "}
                                                </Text>
                                            </View>
                                            <View
                                                style={
                                                    styles.questionAnswerWide
                                                }
                                            >
                                                <Text>{transCopy}</Text>
                                            </View>
                                        </View>
                                    );
                                    break;
                                case "{E0DECE4B-6666-4a8f-A065-082708572369}":
                                    return (
                                        <View
                                            style={{
                                                flexDirection: "column",
                                                marginBottom: 10,
                                            }}
                                        >
                                            <View
                                                wrap={false}
                                                style={{
                                                    flexDirection: "row",
                                                    marginBottom: 10,
                                                }}
                                            >
                                                <Text
                                                    style={
                                                        styles.questionTextWide
                                                    }
                                                >
                                                    {rows[0].value}
                                                </Text>
                                            </View>
                                            <View
                                                style={
                                                    styles.questionAnswerWide
                                                }
                                            >
                                                <Html style={styles.richArea}>
                                                    {
                                                        props.props[
                                                            datafieldname[0]
                                                                .value
                                                        ]
                                                    }{" "}
                                                </Html>
                                            </View>
                                        </View>
                                    );
                                    break;
                                case "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
                                    return (
                                        <View
                                            wrap={false}
                                            style={{
                                                flexDirection: "row",
                                                marginBottom: 10,
                                            }}
                                        >
                                            <Text style={styles.questionText}>
                                                {/* {FieldsTranslations(rows[0].value)} */}
                                                {rows[0].value}
                                            </Text>
                                            <Text style={styles.questionAnswer}>
                                                {getPickListLabel(
                                                    props.pickListData,
                                                    datafieldname[0].value,
                                                    props.props[
                                                        datafieldname[0].value
                                                    ]
                                                )}
                                            </Text>
                                        </View>
                                    );
                                    break;
                                default:
                                    return (
                                        <View
                                            wrap={false}
                                            style={{
                                                flexDirection: "row",
                                                marginBottom: 10,
                                            }}
                                        >
                                            <Text style={styles.questionText}>
                                                {/* {FieldsTranslations(rows[0].value)} */}
                                                {rows[0].value}
                                            </Text>
                                            <Text style={styles.questionAnswer}>
                                                {" "}
                                                {
                                                    props.props[
                                                        datafieldname[0].value
                                                    ]
                                                }
                                            </Text>
                                        </View>
                                    );
                                    break;
                            }
                        })()}

                        {/* <Text className="govuk-summary-list__value">
                            {fieldtype[0].value ==
                            "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}"
                                ? formatDate(
                                      props.props.values[datafieldname[0].value]
                                  )
                                : fieldtype[0].value ==
                                  "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}"
                                ? getPickListLabel(
                                      props.props.formData.pickListData,
                                      datafieldname[0].value,
                                      props.props.values[datafieldname[0].value]
                                  )
                                : fieldtype[0].value ==
                                  "{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}"
                                ? getRadioLabel(
                                      props.props.formData.pickListData,
                                      datafieldname[0].value,
                                      props.props.values[datafieldname[0].value]
                                  )
                                : fieldtype[0].value ==
                                  "{16D63FD6-119B-4353-BDCA-18358721C3FE}"
                                ? "ssss"
                                : props.props.values[datafieldname[0].value]}
                        </Text> */}
                    </>
                );
            })}
        </>
    );
};