import Link from "next/link";
import _ from "lodash";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import xpath from "xpath";
import BuildField from "./buildfield";
import jsonpath from "jsonpath";

export default function BuildRow(props) {
    let { t } = useTranslation();

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

    const {
        rowXML,
        whichSection,
        sectionCount,
        onSubmit,
        mandatoryFieldsData,
    } = props;

    const parser = new DOMParser();

    return (
        <div className="govuk-grid-column-full">
            {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 (
                            <BuildField
                                fieldType={fieldtype[0].value}
                                label={rows[0].value}
                                datafieldname={datafieldname[0].value}
                                key={key}
                                props={props}
                                picklistData={
                                    props.props.props.formData.pickListData
                                }
                                mandatoryFieldsData={mandatoryFieldsData}
                            />
                        );
                    } else {
                        return null;
                    }
                }
            })}
        </div>
    );
}