import {__, _nonce} from "../../../../assets/javascripts/library.js";
import React, {useState} from "react";
import ReactDOM from "react-dom/client";
import {ToasterProvider} from "../../global-components/toaster.jsx";
import Settings from "./settings.jsx";
import Addons from "../../event-registration/partials/addons.jsx";
import EventAddons from "./event-addons.jsx";

function NewAddonForm({event_id}) {
    const [formData, setFormData] = useState({
        event_id: event_id ,
        addon_name: '',
        addon_amount: '0,00',
        addon_description: '',
    });

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

    const handleSubmit = () => {
        const response = fetch("/wp-json/solea/event-details/print-page/addons/save-new-addon", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                formData,
                solea_nonce: _nonce(),
            }),
        })
            .then((res) => res.json())
            .then((data) => {
                const container = document.getElementById('solea_event_group_contents');
                const root = ReactDOM.createRoot(container);
                root.render(
                    <ToasterProvider>
                        <EventAddons link="addons" result={data.result} toast_message={data.result.message} />
                    </ToasterProvider>
                );
            });
    };



    return (
        <div id="solea_event_group_contents">
            <div className="solea-page">
                <h3>{__('Add new addon', 'solea')}</h3>
                <table>
                    <tr>
                        <td>{__('Name of addon', 'solea')}:</td>
                        <td>
                            <input
                                type="text"
                                defaultValue={formData.addon_name}
                                name="addon_name"
                                onChange={handleChange}
                            />
                        </td>
                    </tr>

                    <tr>
                        <td>{__('Amount of addon', 'solea')}:</td>
                        <td>
                            <input
                                type="text"
                                defaultValue={formData.addon_amount}
                                name="addon_amount"
                                onChange={handleChange}
                            /> {__('Euro  total', 'solea')}
                        </td>
                    </tr>

                    <tr>
                        <td>{__('Description', 'solea')}:</td>
                        <td>
                            <textarea
                                name="addon_description"
                                defaultValue={formData.addon_description}
                                onChange={handleChange}
                                className="tb_large"
                            />
                        </td>
                    </tr>

                </table>

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

export default NewAddonForm;