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 BuildCheckField from "./buildCheckfield";
import { useSelector, shallowEqual, connect } from "react-redux";
import {
    setCaseReference,
    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;
    }

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

                    if (isRequiredField[0].RequiredLevel.Value != "None") {
                        return (
                            <div className="govuk-summary-list__row" key={key}>
                                <dt className="govuk-summary-list__key">
                                    {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
                                              ]
                                          )
                                        : props.props.form["appealForm"].values[
                                              datafieldname[0].value
                                          ]}
                                </dd>
                                <dd className="govuk-summary-list__actions">
                                    <a
                                        className="govuk-link"
                                        href="#"
                                        onClick={() => {
                                            updateCurrentSection(whichSection);
                                        }}
                                    >
                                        Change
                                        <span className="govuk-visually-hidden">
                                            {" "}
                                            name
                                        </span>
                                    </a>
                                </dd>
                            </div>
                        );
                    } 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);