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";
import { updateCase } from "../../actions";
import jsonpath from "jsonpath";
import { getFormCollectionByID } from "../utils";

import data from "../../data/collections.json";

let CompleteAppeal = (props) => {
    // un comment to update incident with an appealtype id
    useEffect(() => {
        let incidentId = props.appealType.caseReference.incidentid;
        let updateBody = props.props.form.appealForm.values;

        let appTypeCollection = getFormCollectionByID(
            props.appealType.appealTypeID
        );
        let updateBindAppealTypeToIncident =
            appTypeCollection.LogicalName + "Ids";

        Object.assign(updateBody, {
            "pinswg_Appellant@odata.bind":
                "/contacts(" + props.props.accountDetails.loggedinUserId + ")",
            "pinswg_AssociatedLPA@odata.bind":
                "/accounts(" + props.appealType.appealLPA + ")",
            "pinswg_name": props.appealType.caseReference.ticketnumber,
            [updateBindAppealTypeToIncident + "@odata.bind"]:
                "/incidents(" + incidentId + ")",
        });

        updateBody = JSON.stringify(updateBody);

        updateBody = updateBody.replace(/:"Yes"/gm, `:true`);
        updateBody = updateBody.replace(/:"No"/gm, `:false`);
        updateBody = JSON.parse(updateBody);

        let updateFormCollection = appTypeCollection.LogicalCollectionName;
        let primaryAttribute = appTypeCollection.PrimaryIdAttribute;

        updateCase(
            incidentId,
            updateBody,
            updateFormCollection,
            primaryAttribute,
            props.appealType.caseReference.ticketnumber
        );
    }, [
        props.appealType.caseReference,
        props.props.form.appealForm.values,
        props.appealType.appealLPA,
        props.props.accountDetails.loggedinUserId,
        props.appealType.appealTypeID,
    ]);

    const getFormCollection = (formtype) => {
        const collectionName = jsonpath.query(
            data,
            "$..[?(@.LogicalName=='" + formtype + "')]"
        );
        //console.log(collectionName[0]);
        return collectionName[0];
    };

    const getPrimaryAttr = (formtype) => {
        const attrName = jsonpath.query(
            data,
            "$..[?(@.LogicalName=='" + formtype + "')].PrimaryIdAttribute"
        );
        return attrName[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);
    };

    // console.log(JSON.stringify(props.props.form.appealForm.values, null, 2));
    //alert(JSON.stringify(props.props.form.appealForm.values, null, 2));

    return (
        <div className="govuk-grid-row">
            <div className="govuk-grid-column-two-thirds">
                <div className="govuk-panel govuk-panel--confirmation">
                    <h1 className="govuk-panel__title">Appeal complete</h1>
                    <div className="govuk-panel__body">
                        Your reference number
                        <br />
                        <strong>
                            {props.appealType.caseReference.ticketnumber}
                        </strong>
                    </div>
                </div>

                <p className="govuk-body">
                    We have sent you a confirmation email.
                </p>

                <h2 className="govuk-heading-m">What happens next</h2>

                <p className="govuk-body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Morbi a metus non quam mollis egestas. Integer ac leo
                    cursus, laoreet nulla sed, tempus tellus. Mauris condimentum
                    erat arcu.
                </p>
                <p className="govuk-body">
                    Sed imperdiet dignissim ipsum. Orci varius natoque penatibus
                    et magnis dis parturient montes, nascetur ridiculus mus. In
                    id leo in turpis aliquam venenatis ut non erat. Ut est arcu,
                    luctus sit amet pretium sed, iaculis non purus. Etiam dictum
                    tortor commodo luctus rhoncus.
                </p>

                <p className="govuk-body">
                    <Link href="/myportal">
                        <a className="govuk-link">Back to My Portal</a>
                    </Link>
                </p>

                <p className="govuk-body">
                    <a href="#" className="govuk-link">
                        What did you think of this service?
                    </a>
                    (takes 30 seconds)
                </p>
            </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)(CompleteAppeal);