import jsonpath from "jsonpath";
import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { connect } from "react-redux";
import xpath from "xpath";
import { setCurrentSection } from "../../store/appealType/action";
import { FieldsTranslations } from "../elements";

const BuildProgress = (props) => {
    let { t } = useTranslation();
    const router = useRouter();
    const { locale } = router;

    const {
        titleList,
        currentSection,
        documentListObj,
        formObjXML,
        mandatoryFieldsData,
        gotoSection,
    } = props;
    const parser = new DOMParser();

    const BuildFormObj = (formObjXML) => {
        var doc = parser.parseFromString(formObjXML, "text/xml");

        var tabs = xpath.select("//form/tabs/tab[*]", doc);

        const formObj = Object.keys(tabs).map((key, index) => {
            var sectionXML = xpath.select(
                "//tabs/tab[" +
                    (index + 1) +
                    "]//rows/row/*/control[not(@parentField)]/../..",
                doc
            );

            return BuildRowObj(sectionXML, titleList[key].value);
        });

        const progressObj = Object.keys(formObj).map((key, index) => {
            let fieldObj = formObj[key].fieldsrowObj;

            let rowCount = 0;
            typeof props.props.initialValues != "undefined" &&
                Object.keys(fieldObj).map((key, index) => {
                    fieldObj[key].datafieldname in props.props.initialValues &&
                        props.props.initialValues[
                            fieldObj[key].datafieldname
                        ] != null &&
                        rowCount++;
                });

            return {
                "title": titleList[key].value,
                rowCount,
                "totalFields": formObj[key].fieldsTotal,
                "allFieldsComplete": rowCount == formObj[key].fieldsTotal,
            };
        });

        return progressObj;
    };

    const BuildRowObj = (rowXML, titleList) => {
        const rowObj = 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 validation = xpath.select("//@validation", doc);
                var datafieldname = xpath.select("//@datafieldname", doc);
                var datafieldcontent = xpath.select("//@datafieldcontent", doc);
                var parentField = xpath.select("//@parentField", doc);

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

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

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

                var hint = xpath.select("//label/@hint", doc);
                var dateStart = xpath.select("//@dateStart", doc);
                var dateEnd = xpath.select("//@dateEnd", doc);

                hint = !_.isEmpty(hint) && hint[0].value;

                validation = !_.isEmpty(validation) ? validation[0].value : [];

                parentField = !_.isEmpty(parentField) && parentField[0].value;

                parentFieldShowOnValue =
                    !_.isEmpty(parentFieldShowOnValue) &&
                    parentFieldShowOnValue[0].value;

                datafieldcontent =
                    !_.isEmpty(datafieldcontent) && datafieldcontent[0].value;

                requiredDocumentValue =
                    !_.isEmpty(requiredDocumentValue) &&
                    requiredDocumentValue[0].value;

                requiredDocumentLabel =
                    !_.isEmpty(requiredDocumentLabel) &&
                    requiredDocumentLabel[0].value;

                dateStart = !_.isEmpty(dateStart) && dateStart[0].value;

                dateEnd = !_.isEmpty(dateEnd) && dateEnd[0].value;

                const isRequiredField = jsonpath.query(
                    mandatoryFieldsData,
                    "$..value[?(@.LogicalName=='" +
                        datafieldname[0].value +
                        "')]"
                );

                if (datafieldname[0].value == "pinswg_fileUpload") {
                    return {
                        "fieldType": fieldtype[0].value,
                        "label": rows[0].value,
                        "datafieldname": datafieldname[0].value,
                        "key": key,
                        "picklistData": props.props.formData.pickListData,
                        "mandatoryFieldsData": mandatoryFieldsData,
                    };
                } else {
                    if (typeof isRequiredField[0] != "undefined") {
                        if (isRequiredField[0].RequiredLevel.Value != "None") {
                            //console.log(datafieldname[0].value, validation);
                            return {
                                "fieldType": fieldtype[0].value,
                                "label": rows[0].value,
                                "datafieldname": datafieldname[0].value,
                                "datafieldcontent": datafieldcontent,
                                "parentField": parentField,
                                "parentFieldShowOnValue":
                                    parentFieldShowOnValue,
                                "key": key,
                                "picklistData":
                                    props.props.formData.pickListData,
                                "mandatoryFieldsData": mandatoryFieldsData,
                                "hint": hint,
                                "requiredDocumentLabel": requiredDocumentLabel,
                                "requiredDocumentValue": requiredDocumentValue,
                                "validation": validation,
                                "dateStart": dateStart,
                                "dateEnd": dateEnd,
                                "setDocumentsList":
                                    props.props.setDocumentsList,
                                "documentList":
                                    props.props.appealType.documentList,
                            };
                        } else {
                            return null;
                        }
                    } else {
                        return null;
                    }
                }
            }
        });

        rowObj = rowObj.filter(function (el) {
            return el != null;
        });

        const filterUnwanted = (rowObj) => {
            const required = rowObj.filter((el) => {
                return !_.isEmpty(el.validation);
            });
            return required;
        };

        return {
            "title": titleList,
            "validationFieldsTotal": filterUnwanted(rowObj).length,
            "fieldsTotal": rowObj.length,
            "fieldsrowObj": rowObj,
        };
    };

    const progObj = BuildFormObj(formObjXML);

    return (
        <>
            <nav
                role="navigation"
                aria-labelledby="progress-list"
                className="at-nav"
            >
                <h2 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey progress-heading">
                    {t("newappeal:new-appeal-progress-nav-label")}:{" "}
                    <span className="progress-case-reference">
                        {props.props.appealType.caseReference.ticketnumber}
                    </span>
                </h2>
                <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />

                <ol className="govuk-list" id="progress-list">
                    <ul className="govuk-list ">
                        <li className="at-nav__page">
                            <ol className="govuk-list">
                                {Object.keys(progObj).map((key, index) =>
                                    parseInt(key) + 1 == currentSection ? (
                                        <li key={key}>
                                            <b>
                                                {FieldsTranslations(
                                                    progObj[index].title
                                                )}
                                            </b>
                                        </li>
                                    ) : (
                                        <li key={key}>
                                            {props.props.appealType
                                                .formComplete == "true" ||
                                            parseInt(key) + 1 <
                                                currentSection ||
                                            progObj[index].allFieldsComplete ==
                                                true ? (
                                                <a
                                                    className="govuk-link"
                                                    href="#"
                                                    onClick={() => {
                                                        gotoSection(
                                                            parseInt(key) + 1
                                                        );
                                                    }}
                                                >
                                                    {FieldsTranslations(
                                                        progObj[index].title
                                                    )}
                                                </a>
                                            ) : (
                                                FieldsTranslations(
                                                    progObj[index].title
                                                )
                                            )}
                                        </li>
                                    )
                                )}
                            </ol>
                        </li>
                    </ul>
                </ol>
            </nav>

            {Object.keys(documentListObj).length > 0 && (
                <div>
                    <h3 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey">
                        {t("newappeal:new-appeal-documentlist-nav")}:
                    </h3>
                    <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
                    <ol className="govuk-list document-list">
                        <ul className="govuk-list ">
                            <li className="at-nav__page">
                                <ol className="govuk-list govuk-list--bullet">
                                    {Object.entries(documentListObj).map(
                                        ([key, value]) => {
                                            return <li key={key}>{value}</li>;
                                        }
                                    )}
                                </ol>
                            </li>
                        </ul>
                    </ol>
                </div>
            )}
        </>
    );
};

const mapStateToProps = (state) => {
    return {
        search: state.search,
        searchResultsObj: state.searchResultsObj,
        formData: state.formData,
        appealType: state.appealType,
        initialValues: state.appealType.caseReference.caseDetails,
        //form: state.form,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        gotoSection: (thisSection) => {
            dispatch(setCurrentSection(thisSection));
        },
    };
};

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