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 { useDropzone } from "react-dropzone";
import {
    createWatchedCases,
    sendRepCompleteMessage,
    setRepInvolvment
} from "../../../actions/services/portalService";
import { sendEmail } from "../../../actions/services/notifyService";
import { setRepresentationReset } from "../../../store/currentView/action";

const RepComplete = (props) => {
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;
    const {
        formObj,
        appellantApplicantRepresentationArr,
        setRepresentationCapacity,
        setRepresentationSubmit,
        currentView,
        setSubmitBack,
        setRepresentationSubmitConfirmation,
        setRepresentationMessageSent,
        repFormData
    } = props;
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
    const files = acceptedFiles.map((file) => (
        <li key={file.path}>
            {file.path} - {file.size} bytes
        </li>
    ));

    const isSIPS =
        props.props.currentView.caseReference.appealType === 846040002;

    useEffect(() => {
        const reference = isSIPS
            ? "PEDW-CONSULTATION-COMPLETE"
            : "PEDW-REPRESENTATION-COMPLETE";
        const templateId = isSIPS
            ? "c3f373ca-df9d-4967-bea0-3ad3a57f8dcc"
            : "c49785e7-3217-40b6-b33f-dffc4e58d5c1";

        const emailAddress =
            props.props.props.props.accountDetails.accountDetails.emailaddress1;
        const personalisation = {
            "caseReference":
                props.props.currentView.caseReference.currentReference,
            "emailAddress":
                props.props.props.props.accountDetails.accountDetails
                    .emailaddress1,
            "linkExpiry": 10 * 60
        };

        (props.props.currentView.representationMessageSent != true &&
            (setRepInvolvment(
                props.props.currentView.caseReference.incidentid,
                props.props.props.props.accountDetails.accountDetails.contactid
            ),
            sendRepCompleteMessage(
                props.props.props.props.accountDetails.containerID,
                props.props.currentView.caseReference.ticketnumber,
                props.repFormData.repfile_name
            ),
            sendEmail(templateId, emailAddress, personalisation, reference),
            createWatchedCases({
                "pinswg_WatchedCase@odata.bind":
                    "/incidents(" +
                    props.props.currentView.caseReference.incidentid +
                    ")",
                "pinswg_Contact@odata.bind":
                    "/contacts(" +
                    props.props.props.props.accountDetails.accountDetails
                        .contactid +
                    ")",
                "pinswg_appealcasetype":
                    props.props.currentView.caseReference.appealType,
                "pinswg_representationsubmitted": new Date(Date.now()),
                "pinswg_representationtype":
                    props.props.currentView.caseReference.hasOwnProperty(
                        "repDetails"
                    )
                        ? props.props.currentView.caseReference.repDetails
                              .representationType
                        : props.props.currentView.caseReference
                              .representationType
            }),
            setRepresentationMessageSent(true)),
            window.scrollTo({ top: 0, behavior: "smooth" }));
    });
    return (
        <div id="rep-appellant">
            <div className="govuk-grid-column-full">
                <div className="govuk-grid-row govuk-body">
                    <h1 className="govuk-heading-m ">
                        {t("myrepresentations:rep-complete-heading")}
                    </h1>
                    <p>{t("myrepresentations:rep-complete-para-one")}</p>
                    <p>{t("myrepresentations:rep-complete-para-two")}</p>
                    <p> {t("myrepresentations:rep-complete-para-three")}</p>
                </div>
                <div className="govuk-grid-row">
                    <div className="govuk-button-group">
                        <Link
                            href="/"
                            onClick={() => setRepresentationReset()}
                            className="govuk-button"
                        >
                            {t("common:continue-button")}
                        </Link>
                    </div>
                </div>
            </div>
        </div>
    );
};

const mapStateToProps = (state) => {
    return {
        search: state.search,
        searchResultsObj: state.searchResultsObj,
        formData: state.formData,
        appealType: state.appealType,
        currentView: state.currentView,
        myRepresentations: state.myRepresentations,
        initialValues: state.currentView.caseReference.repDetails,
        accountDetails: state.accountDetails
        //form: state.form,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {};
};

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