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

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

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

    const { formXML, whichSection, sectionCount } = props;

    const parser = new DOMParser();
    var doc = parser.parseFromString(props.formXML, "text/xml");
    var titles = xpath.select(
        "//form/tabs/tab[" +
            (parseInt(whichSection) + 1) +
            " ]/labels/label/@description",
        doc
    );
    var rowXML = xpath.select(
        "/form/tabs/tab[" +
            (parseInt(whichSection) + 1) +
            "]/columns//sections/section/rows/row",
        doc
    );
    return (
        <div className="govuk-grid-row">
            <div className="govuk-grid-column-full">
                <h2>
                    {props.whichSection} - {titles[0].value}{" "}
                </h2>
                <BuildRow
                    rowXML={rowXML}
                    whichSection={props.whichSection}
                    sectionCount={props.sectionCount}
                />
                <button
                    type="submit"
                    role="button"
                    draggable="false"
                    class="govuk-button"
                    data-module="govuk-button"
                >
                    Continue
                </button>
            </div>
        </div>
    );
}