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 {
    patchCase,
    sendCaseCompleteMessage,
    sendEmail,
    updateCase,
} from "../../actions";
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
        );

        const reference = "PEDW-COMPLETE";
        const templateId = "618e0463-b092-4733-a024-bf8a3bbde808";
        const emailAddress = props.props.accountDetails.loggedinUserEmail;
        const personalisation = {
            "caseReference": props.appealType.caseReference.ticketnumber,
            "emailAddress": props.props.accountDetails.loggedinUserEmail,
            "linkExpiry": 10 * 60,
        };
        sendEmail(templateId, emailAddress, personalisation, reference);

        sendCaseCompleteMessage(
            props.appealType.caseReference.ticketnumber,
            props.props.accountDetails.loggedinUserEmail
        );

        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" className="govuk-link">
                        Back to My Portal
                    </Link>
                </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);