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 } 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,
        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("$['" + appealtypes + "']", fieldLookup);

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

    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(
                        "$..value[?(@.LogicalName=='" +
                            datafieldname[0].value +
                            "')]",
                        mandatoryFieldsData
                    );

                    // 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"
                    ) {
                        if (typeof isRequiredField[0] != "undefined") {
                            if (
                                isRequiredField[0].RequiredLevel.Value != "None"
                            ) {
                                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 ==
                                            "{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 ==
                                                  "{16D63FD6-119B-4353-BDCA-18358721C3FE}"
                                                ? (console.log(
                                                      props.props.form[
                                                          "appealForm"
                                                      ].values[
                                                          datafieldname[0].value
                                                      ]
                                                  ),
                                                  (<div>sdfsd eeefsdfs</div>))
                                                : fieldtype[0].value ==
                                                  "{0273EDBD-AC1D-40d3-9FB2-095C621B552D}"
                                                ? props.props.form[
                                                      "appealForm"
                                                  ].values[
                                                      datafieldname[0].value
                                                  ].map((tenant, index) => {
                                                      return (
                                                          <div
                                                              key={index}
                                                              style={{
                                                                  display:
                                                                      "flex",
                                                              }}
                                                          >
                                                              <div className="govuk-!-width-one-half">
                                                                  {
                                                                      tenant.pinswg_agriculturaltenantname
                                                                  }
                                                              </div>
                                                              <div className="govuk-!-width-one-half">
                                                                  Served:{" "}
                                                                  {formatDate(
                                                                      tenant.dateserved
                                                                  )}
                                                              </div>
                                                          </div>
                                                      );
                                                  })
                                                : props.props.form["appealForm"]
                                                      .values[
                                                      datafieldname[0].value
                                                  ]}
                                        </dd>

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

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

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

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