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 BuildCheckRow from "./buildcheckrow";
import { reduxForm, formValueSelector } from "redux-form";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
import {
    setCurrentSection,
    setFormComplete,
} from "../../store/appealType/action";

let BuildCheckSection = (props) => {
    useEffect(() => {
        setFormComplete();
    }, []);

    let { t } = useTranslation();

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

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

    const parser = new DOMParser();
    var doc = parser.parseFromString(props.formXML, "text/xml");
    var titles = xpath.select(
        "//form/tabs/tab[*]/labels/label/@description",
        doc
    );
    var rowXML = xpath.select(
        "/form/tabs/tab[*]/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
    };

    return (
        <div className="govuk-grid-row">
            <div className="govuk-grid-column-full">
                <div>
                    <h1 className="govuk-heading-m">
                        Are these answers correct?
                    </h1>
                    <dl className="govuk-summary-list ">
                        {Object.keys(titles).map((key) => (
                            <>
                                {/* <h2 className="govuk-heading-m">
                                {titles[key].value}
                            </h2> */}

                                <BuildCheckRow
                                    formXML={formXML}
                                    whichSection={parseInt(key) + 1}
                                    sectionCount={key}
                                    props={props}
                                    key={key}
                                    mandatoryFieldsData={mandatoryFieldsData}
                                />
                            </>
                        ))}
                    </dl>
                    <dl className="govuk-summary-list govuk-!-margin-bottom-9 at-summary-list"></dl>
                </div>
                <div className="govuk-button-group">
                    <a
                        className="govuk-button"
                        data-module="govuk-button"
                        onClick={() => setCurrentSection(9999)}
                    >
                        Submit appeal
                    </a>
                </div>
            </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));
        },
    };
};

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

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

export default connect(mapStateToProps, mapDispatchToProps)(BuildCheckSection);