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

const BuildSection = (props) => {
    useEffect(() => {
        window.scrollTo(0, 0);
    });

    let { t } = useTranslation();

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

    const { formXML, sectionCount } = props;
    const [currentSection, setCurrentSection] = useState(1);

    const parser = new DOMParser();
    var doc = parser.parseFromString(props.formXML, "text/xml");
    var titles = xpath.select(
        "//form/tabs/tab[" + currentSection + " ]/labels/label/@description",
        doc
    );
    var rowXML = xpath.select(
        "/form/tabs/tab[" +
            currentSection +
            "]/columns//sections/section/rows/row",
        doc
    );

    var titleList = xpath.select(
        "//form/tabs/tab[*]/labels/label/@description",
        doc
    );

    console.log(titleList);

    const handleParam = (setValue) => (e) => setValue(e.target.value);

    const basicSearch = (event) => {
        event.preventDefault();
        console.log(query);
        // /searchresults
    };

    return (
        <div className="govuk-grid-row">
            <div className="govuk-grid-column-two-thirds">
                <h2>{titles[0].value} </h2>
                <BuildRow
                    rowXML={rowXML}
                    whichSection={props.whichSection}
                    sectionCount={props.sectionCount}
                />
                {}
                <div className="govuk-button-group">
                    {props.sectionCount != currentSection ? (
                        <button
                            className="govuk-button"
                            data-module="govuk-button"
                            onClick={() =>
                                setCurrentSection(currentSection + 1)
                            }
                        >
                            Continue
                        </button>
                    ) : (
                        ""
                    )}
                    {currentSection > 1 ? (
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() =>
                                setCurrentSection(currentSection - 1)
                            }
                        >
                            Back
                        </a>
                    ) : (
                        ""
                    )}
                </div>
            </div>
            <div className="govuk-grid-column-one-third">
                <nav
                    role="navigation"
                    aria-labelledby="progress-list"
                    className="at-nav"
                >
                    <h3 className="govuk-visually-hidden">
                        New Appeal progress
                    </h3>

                    <ol className="govuk-list">
                        <ul className="govuk-list ">
                            <li className="at-nav__page">
                                <ol className="govuk-list">
                                    {Object.keys(titleList).map((key) =>
                                        parseInt(key) + 1 == currentSection ? (
                                            <li>
                                                <b>{titleList[key].value}</b>
                                            </li>
                                        ) : (
                                            <li>{titleList[key].value}</li>
                                        )
                                    )}
                                </ol>
                            </li>
                        </ul>
                    </ol>
                </nav>
            </div>
        </div>
    );
};

export default BuildSection;