import { JSONPath as jsonpath } from "jsonpath-plus";
import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { connect } from "react-redux";
import xpath from "xpath";
import {
    getPickListLabel,
    getRadioLabel,
    bytesToSize,
    getDocumentTypeFromFilename,
    getThumbnailIconByExtension,
} from "../../components/utils";
import fieldLookup from "../../data/crmfieldlookuptranslations.json";

import {
    setCurrentSection,
    setFormComplete,
} from "../../store/appealType/action";

let BuildCheckRow = (props) => {
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;

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

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

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

    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({
            path: "$['" + appealtypes + "']",
            json: fieldLookup,
            eval: true,
        });

        let labelTrans =
            router.locale == "cy"
                ? jsonpath({
                      path: '$..[?(@ && @.value=="' + label + '")].value_cy',
                      json: formObj,
                      eval: true,
                  })
                : label;
        return labelTrans;
    };

    function isObjectAndNotEmpty(value) {
        return (
            value !== null &&
            typeof value === "object" &&
            Object.keys(value).length > 0
        );
    }

    return (
        <>
            {Object.keys(rowXML).map((key, index) => {
                var doc = parser.parseFromString(
                    rowXML[key].outerHTML,
                    "text/xml"
                );
                if (_.isEmpty(rowXML[key].innerHTML)) {
                    ("");
                } else {
                    var rows = xpath.select("//label/@description", doc);
                    var fieldtype = xpath.select("//@classid", doc);
                    var datafieldname = xpath.select("//@datafieldname", doc);
                    const isRequiredField = jsonpath({
                        path:
                            "$..value[?(@ && @.LogicalName=='" +
                            datafieldname[0].value +
                            "')]",
                        json: mandatoryFieldsData,
                        eval: true,
                    });

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

                    // if (datafieldname[0].value.indexOf("fileUpload") > 0) {
                    //     isRequiredField.push({
                    //         "LogicalName": datafieldname[0].value,
                    //         "RequiredLevel": {
                    //             "Value": "Recommended",
                    //             "CanBeChanged": true,
                    //             "ManagedPropertyLogicalName":
                    //                 "canmodifyrequirementlevelsettings",
                    //         },
                    //         "MetadataId":
                    //             "32a7e6fc-4283-eb11-aac0-00224800be9c",
                    //     });
                    // }

                    //console.log(
                    //     datafieldname[0].value.indexOf("fileUpload") > 0,
                    //     isRequiredField,
                    //     props.props.form["appealForm"].values[
                    //         datafieldname[0].value
                    //     ]
                    // );

                    // if (
                    //     typeof props.props.form["appealForm"].values[
                    //         datafieldname[0].value
                    //     ] != "undefined"
                    // ) {
                    return (
                        <div className="govuk-summary-list__row" key={key}>
                            <dt className="govuk-summary-list__key">
                                {FieldsTranslations(rows[0].value)}
                            </dt>

                            <dd className="govuk-summary-list__value">
                                {fieldtype[0].value ==
                                "{E0DECE4B-6666-4a8f-A065-082708572369}" ? (
                                    <div
                                        dangerouslySetInnerHTML={{
                                            __html: props.props.form[
                                                "appealForm"
                                            ].values[datafieldname[0].value],
                                        }}
                                    />
                                ) : fieldtype[0].value ==
                                  "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}" ? (
                                    formatDate(
                                        props.props.form["appealForm"].values[
                                            datafieldname[0].value
                                        ]
                                    )
                                ) : fieldtype[0].value ==
                                  "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}" ? (
                                    getPickListLabel(
                                        props.props.formData.pickListData,
                                        datafieldname[0].value,
                                        props.props.form["appealForm"].values[
                                            datafieldname[0].value
                                        ]
                                    )
                                ) : fieldtype[0].value ==
                                  "{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}" ? (
                                    getRadioLabel(
                                        props.props.formData.pickListData,
                                        datafieldname[0].value,
                                        props.props.form["appealForm"].values[
                                            datafieldname[0].value
                                        ]
                                    )
                                ) : fieldtype[0].value ==
                                  "{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}" ? (
                                    props.props.form["appealForm"].values[
                                        datafieldname[0].value
                                    ] == "false" ? (
                                        router.locale == "cy" ? (
                                            "Nac ydw"
                                        ) : (
                                            "No"
                                        )
                                    ) : router.locale == "cy" ? (
                                        "Oes"
                                    ) : (
                                        "Yes"
                                    )
                                ) : fieldtype[0].value ==
                                  "{16D63FD6-119B-4353-BDCA-18358721C3FE}" ? (
                                    <>
                                        {props.filesArray.map((blob, i) => (
                                            <div key={i}>
                                                {getDocumentTypeFromFilename(
                                                    blob.name
                                                ) ===
                                                    documentTypeCode[0]
                                                        .value && (
                                                    <div
                                                        style={{
                                                            display: "flex",
                                                            alignItems:
                                                                "flex-start",
                                                        }}
                                                        className="govuk-!-margin-bottom-2"
                                                    >
                                                        <img
                                                            style={{
                                                                minWidth: "50",
                                                                width: "50",
                                                            }}
                                                            src={getThumbnailIconByExtension(
                                                                blob.name
                                                            )}
                                                            alt={blob.name}
                                                            width="50"
                                                        />
                                                        <span
                                                            style={{
                                                                maxWidth: "85%",
                                                            }}
                                                            className="govuk-body govuk-!-font-size-14 govuk-!-margin-left-2"
                                                        >
                                                            {blob.name} -{" "}
                                                            {bytesToSize(
                                                                blob.size
                                                            )}{" "}
                                                        </span>
                                                    </div>
                                                )}
                                            </div>
                                        ))}
                                        <br />
                                        {typeof props.props.form["appealForm"]
                                            .values[datafieldname[0].value] !=
                                            "undefined" &&
                                            props.props.form[
                                                "appealForm"
                                            ].values[
                                                datafieldname[0].value
                                            ].map(
                                                (blob, i) =>
                                                    isObjectAndNotEmpty(
                                                        blob
                                                    ) && (
                                                        <div key={i}>
                                                            {getDocumentTypeFromFilename(
                                                                blob.name
                                                            ) ===
                                                                documentTypeCode[0]
                                                                    .value && (
                                                                <div
                                                                    style={{
                                                                        display:
                                                                            "flex",
                                                                        alignItems:
                                                                            "flex-start",
                                                                    }}
                                                                    className="govuk-!-margin-bottom-2"
                                                                >
                                                                    <img
                                                                        style={{
                                                                            minWidth:
                                                                                "50",
                                                                            width: "50",
                                                                        }}
                                                                        src={getThumbnailIconByExtension(
                                                                            blob.name
                                                                        )}
                                                                        alt={
                                                                            blob.name
                                                                        }
                                                                        width="50"
                                                                    />
                                                                    <span
                                                                        style={{
                                                                            maxWidth:
                                                                                "85%",
                                                                        }}
                                                                        className="govuk-body govuk-!-font-size-14 govuk-!-margin-left-2"
                                                                    >
                                                                        {
                                                                            blob.name
                                                                        }{" "}
                                                                        -{" "}
                                                                        {bytesToSize(
                                                                            blob.size
                                                                        )}{" "}
                                                                    </span>
                                                                </div>
                                                            )}
                                                        </div>
                                                    )
                                            )}
                                    </>
                                ) : fieldtype[0].value ==
                                  "{0273EDBD-AC1D-40d3-9FB2-095C621B552D}" ? (
                                    typeof props.props.form["appealForm"]
                                        .values[datafieldname[0].value] !=
                                        "undefined" &&
                                    props.props.form["appealForm"].values[
                                        datafieldname[0].value
                                    ] != null ? (
                                        props.props.form["appealForm"].values[
                                            datafieldname[0].value
                                        ].map((tenant, index) => {
                                            console.log(
                                                typeof tenant.pinswg_owners_firstname
                                            );
                                            return typeof tenant.pinswg_owners_firstname !=
                                                "undefined" ||
                                                typeof tenant.pinswg_agriculturaltenantname_firstname !=
                                                    "undefined" ? (
                                                <div
                                                    key={index}
                                                    style={{
                                                        display: "flex",
                                                    }}
                                                >
                                                    <div className="govuk-!-width-one-half">
                                                        {tenant?.pinswg_agriculturaltenantname_firstname &&
                                                            tenant.pinswg_agriculturaltenantname_firstname +
                                                                " " +
                                                                tenant.pinswg_agriculturaltenantname_lastname}

                                                        {tenant?.pinswg_owners_firstname &&
                                                            tenant.pinswg_owners_firstname +
                                                                " " +
                                                                tenant.pinswg_owners_lastname}
                                                    </div>
                                                    <div className="govuk-!-width-one-half">
                                                        Served:{" "}
                                                        {formatDate(
                                                            tenant.dateserved
                                                        )}
                                                    </div>
                                                </div>
                                            ) : (
                                                ""
                                            );
                                        })
                                    ) : (
                                        "N/A"
                                    )
                                ) : (
                                    props.props.form["appealForm"].values[
                                        datafieldname[0].value
                                    ]
                                )}
                            </dd>

                            <dd className="govuk-summary-list__actions">
                                {rows[0].value != "Temporary reference" && (
                                    <a
                                        className="govuk-link"
                                        href="#"
                                        onClick={() => {
                                            setCurrentSection(whichSection);
                                        }}
                                    >
                                        {" "}
                                        {t("newappeal:change-link-label")}
                                        <span className="govuk-visually-hidden">
                                            {" "}
                                            {FieldsTranslations(rows[0].value)}
                                        </span>
                                    </a>
                                )}
                            </dd>
                        </div>
                    );

                    // }
                }
            })}
        </>
    );
};

const mapDispatchToProps = (dispatch) => {
    return {
        setCurrentSection: (currentSection) => {
            dispatch(setCurrentSection(currentSection));
        },
        updateCurrentSection: (whichSection) => {
            dispatch(setCurrentSection(whichSection));
            dispatch(setFormComplete("true"));
        },
    };
};

const mapStateToProps = (state) => ({
    count: state.count,
});

export default connect(mapStateToProps, mapDispatchToProps)(BuildCheckRow);