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";
import { reduxForm, formValueSelector } from "redux-form";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";

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

    let { t } = useTranslation();

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

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

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

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

    const onHandleSubmit = (values) => {
        setCurrentSection(currentSection + 1);
    };

    return (
        <div className="govuk-grid-row">
            <div className="govuk-grid-column-two-thirds">
                <h2>{titles[0].value} </h2>
                <form onSubmit={handleSubmit(onHandleSubmit)}>
                    <BuildRow
                        rowXML={rowXML}
                        whichSection={props.whichSection}
                        sectionCount={props.sectionCount}
                        onSubmit={onSubmit}
                    />
                    {}
                    <div className="govuk-button-group">
                        {props.sectionCount != currentSection ? (
                            <button
                                type="submit"
                                className="govuk-button"
                                data-module="govuk-button"
                            >
                                Continue
                            </button>
                        ) : (
                            ""
                        )}
                        {currentSection > 1 ? (
                            <a
                                className="govuk-link"
                                href="#"
                                onClick={() =>
                                    setCurrentSection(currentSection - 1)
                                }
                            >
                                Back
                            </a>
                        ) : (
                            ""
                        )}
                    </div>
                </form>
            </div>
            <div className="govuk-grid-column-one-third">
                <nav
                    role="navigation"
                    aria-labelledby="progress-list"
                    className="at-nav"
                >
                    <h3 className="govuk-heading-s govuk-!-font-weight-regular gov-font-dark-grey">
                        {props.formTitle}
                    </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>
    );
};

const mapStateToProps = (state) => {
    return {
        form: state.form,
    };
};

BuildSection = reduxForm({
    // a unique name for the form
    form: "sssappealForm",
    destroyOnUnmount: false,
})(BuildSection);

const selector = formValueSelector("appealForm"); // <-- same as form name

export default connect(mapStateToProps)(BuildSection);