import React, {useState} from 'react';
import ReactDOM from "react-dom/client";

import RichEditor from "../global-components/rich-editor.jsx";
import {__, _nonce} from '../../../assets/javascripts/library.js';

import 'tinymce/tinymce';
import 'tinymce/icons/default';
import 'tinymce/themes/silver';
import 'tinymce/models/dom';

import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/code';
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';

import 'tinymce/skins/ui/oxide/skin.min.css';
import 'tinymce/skins/content/default/content.min.css';
import {ToasterProvider, useToaster} from "../global-components/toaster.jsx";
import Overview from "../events/partials/overview.jsx";
import AllParticipants from "../events/partials/all-participants.jsx";
import LocalGroupParticipants from "../events/partials/localgroup-participants.jsx";
import ParticipationGroupParticipants from "../events/partials/participationgroup-participants.jsx";
import SignedOffParticipants from "../events/partials/signedoff-participants.jsx";
import Settings from "../events/partials/settings.jsx";


function MailComposer({recipients, comes_from, event_id}) {
    const [mailText, setMailText] = useState('');
    const [formData, setFormData] = useState({
        subject: '',
        recipient: recipients,
        send_coppy_to_my_mail: true,
    });
    const { showToast } = useToaster();
    const handleSubmit = () => {
        const response = fetch("/wp-json/solea/mail-client/send", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                recipients: formData.recipient,
                subject: formData.subject,
                message: mailText,
                event_id: event_id,
                link: comes_from,
                solea_nonce: _nonce(),
                send_copy: formData.send_coppy_to_my_mail,
            }),
        })
            .then((res) => res.json())
            .then((data) => {
                const container = document.getElementById('solea_event_details_content');
                const root = ReactDOM.createRoot(container);


                switch (comes_from) {
                    case 'overview':
                        root.render(
                            <ToasterProvider>
                                <div id="solea_event_group_contents">
                                    <Overview link={comes_from} result={data.result} toast_message={data.mails_sent} />
                                </div>
                            </ToasterProvider>
                        );
                        break;
                    case 'all_participants':
                        root.render(
                            <ToasterProvider>
                                <div id="solea_event_group_contents">
                                    <AllParticipants link={comes_from} result={data.result} toast_message={data.mails_sent} />
                                </div>
                            </ToasterProvider>
                        );
                        break;
                    case 'localgroup_participants':
                        root.render(
                            <ToasterProvider>
                                <div id="solea_event_group_contents">
                                    <LocalGroupParticipants link={comes_from} result={data.result} toast_message={data.mails_sent} />
                                </div>
                            </ToasterProvider>
                        );
                        break;
                    case 'participationgroup_participants':
                        root.render(
                            <ToasterProvider>
                                <div id="solea_event_group_contents">
                                    <ParticipationGroupParticipants link={comes_from} result={data.result} toast_message={data.mails_sent} />
                                </div>
                            </ToasterProvider>
                        );
                        break;
                    case 'signedoff_participants':
                        root.render(
                            <ToasterProvider>
                                <div id="solea_event_group_contents">
                                    <SignedOffParticipants link={comes_from} result={data.result} toast_message={data.mails_sent} />
                                </div>
                            </ToasterProvider>
                        );
                        break;
                    case 'settings':
                        root.render(
                            <ToasterProvider>
                                <div id="solea_event_group_contents">
                                    <Settings link={comes_from} result={data.result} toast_message={data.mails_sent} />
                                </div>
                            </ToasterProvider>
                        );
                        break;
                }
            });
    };


    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: value,
        }));
    };


    return (
        <div>
            <h3>{ __('Send mail', 'solea') }</h3>
            <div className="solea_mail_content_box">
                <h4>{ __('Recipients', 'solea')}</h4>
                <textarea name="recipient" className="solea_mail_recipient_box" onChange={handleChange}>{recipients}</textarea>
                <input
                    type="checkbox"
                    checked={formData.send_coppy_to_my_mail}
                    name="send_coppy_to_my_mail"
                    id="send_coppy_to_my_mail"
                    onChange={(e) =>
                        setFormData((prev) => ({
                            ...prev,
                            send_coppy_to_my_mail: e.target.checked,
                        }))
                    }

                />
                    <label htmlFor="send_coppy_to_my_mail"> { __('Send a copy to my mail', 'solea')}</label>
                <h4>{ __('Subject', 'solea')}</h4>
                <input name="subject" type="text" className="solea_mail_subject_box" onChange={handleChange}
                />


                    <RichEditor value={mailText} onChange={setMailText} />



                <p><button className="button solea-button" onClick={handleSubmit}>{__('Submit', 'solea')}</button></p>
        </div>
        </div>
    );
}

export default MailComposer;