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 { sendCompletionEmailEffect } from "../../lib/newappeal/journeyEffects";
import { normalizeYesNoBooleans } from "../../lib/newappeal/payloadCleanup";
import { setCurrentSection } from "../../store/appealType/action";
import { getFormCollectionByID } from "../utils";

let CompleteAppeal = (props) => {
    const legacyProps = props.props;
    const legacyFormState = legacyProps.form;
    const legacyAccountDetails = legacyProps.accountDetails;

    useEffect(() => {
        let incidentId = props.appealType.caseReference.incidentid;
        let updateBody = legacyFormState.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(" + legacyAccountDetails.loggedinUserId + ")",
            "pinswg_LocalPlanningAuthority@odata.bind":
                "/accounts(" + props.appealType.appealLPA + ")",
            "pinswg_name": props.appealType.caseReference.ticketnumber,
            [updateBindAppealTypeToIncident + "@odata.bind"]:
                "/incidents(" + incidentId + ")"
        });

        updateBody = normalizeYesNoBooleans(updateBody);

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

        const isWelsh = router.locale === "cy";

        const templateId = isWelsh
            ? "f859163e-3ae7-43f9-929b-4206baa09a8b"
            : "618e0463-b092-4733-a024-bf8a3bbde808";

        const reference = "PEDW-COMPLETE" + isWelsh && "-CY";
        const emailAddress = legacyAccountDetails.loggedinUserEmail;
        const personalisation = {
            "caseReference": props.appealType.caseReference.ticketnumber,
            "emailAddress": legacyAccountDetails.loggedinUserEmail,
            "linkExpiry": 10 * 60
        };
        sendCompletionEmailEffect(
            templateId,
            emailAddress,
            personalisation,
            reference
        );

        // sendCaseCompleteMessage(
        //     props.props.accountDetails.containerID,
        //     props.appealType.caseReference.ticketnumber
        // );

        console.log("patching///////////////");
        //
        //patchCase(incidentId);
        window.scrollTo({ top: 0, behavior: "smooth" });
    }, [
        props.appealType.caseReference,
        legacyFormState.appealForm.values,
        props.appealType.appealLPA,
        legacyAccountDetails.loggedinUserId,
        props.appealType.appealTypeID,
        legacyAccountDetails.loggedinUserEmail,
        legacyAccountDetails.containerID
    ]);

    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">
                        {t("newappeal:new-appeal-complete-heading-1")}
                    </h1>
                    <div className="govuk-panel__body"></div>
                </div>

                <p className="govuk-body">
                    {t("newappeal:new-appeal-complete-paragraph-1")}
                </p>

                <h2 className="govuk-heading-m">
                    {" "}
                    {t("newappeal:new-appeal-complete-heading-2")}
                </h2>

                <p className="govuk-body">
                    {t("newappeal:new-appeal-complete-paragraph-2")}
                </p>
                <p className="govuk-body">
                    {t("newappeal:new-appeal-complete-paragraph-3")}
                    <Link href={"mailto:" + t("home:login-contact-email")}>
                        {t("home:login-contact-email")}
                    </Link>
                </p>
                <p className="govuk-body">
                    {t("newappeal:new-appeal-complete-paragraph-4")}
                    {router.locale == "cy" ? (
                        <Link href="https://www.llyw.cymru/diweddariad-i-wasanaeth-penderfyniadau-cynllunio-ac-amgylchedd-cymru-pcac">
                            https://www.llyw.cymru/diweddariad-i-wasanaeth-penderfyniadau-cynllunio-ac-amgylchedd-cymru-pcac
                        </Link>
                    ) : (
                        <Link href="https://www.gov.wales/planning-and-environment-decisions-wales-pedw-service-update">
                            https://www.gov.wales/planning-and-environment-decisions-wales-pedw-service-update
                        </Link>
                    )}
                </p>

                <p className="govuk-body">
                    <Link href="/myportal" className="govuk-link">
                        {t("newappeal:new-appeal-complete-back-link")}
                    </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);