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

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

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

    const { formXML, whichSection, sectionCount, onSubmit } = 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
    );

    return (
        <>
            {Object.keys(rowXML).map((key, index) => {
                var doc = parser.parseFromString(
                    rowXML[key].outerHTML,
                    "text/xml"
                );
                var rows = xpath.select("//label/@description", doc);
                var fieldtype = xpath.select("//@classid", doc);
                var datafieldname = xpath.select("//@datafieldname", doc);

                console.log(props.form);

                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">
                            {
                                props.props.form["appealForm"].values[
                                    datafieldname[0].value
                                ]
                            }
                        </dd>
                        <dd className="govuk-summary-list__actions">
                            <a className="govuk-link" href="#">
                                Change
                                <span className="govuk-visually-hidden">
                                    {" "}
                                    name
                                </span>
                            </a>
                        </dd>
                    </div>
                );
            })}
        </>
    );
}