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";
import { setCurrentSection } from "../../store/appealType/action";

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

    let { t } = useTranslation();

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

    const {
        formXML,
        sectionCount,
        onSubmit,
        handleSubmit,
        formTitle,
        setCurrentSection,
    } = props;

    const currentSection = props.appealType.currentSection;
    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 onHandleSubmit = (values) => {
        setCurrentSection(currentSection + 1);
    };

    return (
        <div className="govuk-grid-row">
            <div className="govuk-grid-column-two-thirds">
                <h1 className="govuk-heading-m  govuk-!-margin-top-5">
                    {titles[0].value}{" "}
                </h1>
                <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>
                        ) : (
                            ""
                        )}
                        {props.sectionCount == currentSection ? (
                            <button
                                type="submit"
                                className="govuk-button"
                                data-module="govuk-button"
                            >
                                Submit
                            </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-bold gov-font-dark-grey">
                        Progress:
                    </h3>
                    <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />

                    <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 {
        search: state.search,
        searchResultsObj: state.searchResultsObj,
        formData: state.formData,
        appealType: state.appealType,
        //form: state.form,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        setCurrentSection: (currentSection) => {
            dispatch(setCurrentSection(currentSection));
        },
    };
};

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

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(
    reduxForm({
        form: "appealForm",
        destroyOnUnmount: false,
    })(BuildSection)
);