import useTranslation from "next-translate/useTranslation";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect } from "react";

import { useDropzone } from "react-dropzone";
import { sendEmail, sendRepCompleteMessage } from "../../../actions";
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>
    ));

    useEffect(() => {
        const reference = "PEDW-REPRESENTATION-COMPLETE";
        const templateId = "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 &&
            (sendRepCompleteMessage(
                props.props.props.props.accountDetails.containerID,
                props.props.currentView.caseReference.currentReference,
                props.repFormData.repfile_name
            ),
            sendEmail(templateId, emailAddress, personalisation, reference),
            setRepresentationMessageSent(true));
    });
    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>
    );
};

export default RepComplete;