import jsonpath from "jsonpath";
import useTranslation from "next-translate/useTranslation";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect } from "react";
import { connect } from "react-redux";
import { formValueSelector } from "redux-form";
import xpath from "xpath";
import { updateCase, patchCase, sendEmail } from "../../actions";
import data from "../../data/collections.json";
import { setCurrentSection } from "../../store/appealType/action";
import { getFormCollectionByID } from "../utils";

let CompleteAppeal = (props) => {
    useEffect(() => {
        let incidentId = props.appealType.caseReference.incidentid;
        let updateBody = props.props.form.appealForm.values;

        let appTypeCollection = getFormCollectionByID(
            props.appealType.appealTypeID
        );
        let updateBindAppealTypeToIncident =
            appTypeCollection.NavigationProperty;

        console.log(props.appealType.appealTypeID, appTypeCollection);

        Object.assign(updateBody, {
            "pinswg_Appellant@odata.bind":
                "/contacts(" + props.props.accountDetails.loggedinUserId + ")",
            "pinswg_LocalPlanningAuthority@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
        );

        sendEmail(
            props.props.accountDetails.loggedinUserEmail,
            "Saved progress for appeal " +
                props.appealType.caseReference.ticketnumber,
            "Your saved appeal " + props.appealType.caseReference.ticketnumber,
            "You have now completed your appeal."
        );

        console.log("patching////////");
        patchCase(incidentId);
    }, [
        props.appealType.caseReference,
        props.props.form.appealForm.values,
        props.appealType.appealLPA,
        props.props.accountDetails.loggedinUserId,
        props.appealType.appealTypeID,
        props.props.accountDetails.loggedinUserEmail,
    ]);

    let { t } = useTranslation();

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

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

    const currentSection = props.appealType.currentSection;

    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);