import {__, _nonce} from "../../../../assets/javascripts/library.js";
import React, {useEffect, useState} from "react";
import {ToasterProvider, useToaster} from "../../global-components/toaster.jsx";
import ReactDOM from "react-dom/client";

import ParticipationGroupParticipants from "./participationgroup-participants.jsx";
import NewAddonForm from "./new-addon.jsx";

function EventAddons({link, result, toast_message = ''}) {
    const { showToast } = useToaster();
    useEffect(() => {
        if (toast_message) {
            showToast(toast_message, 'success');
        }
    }, [toast_message]);

    const open_users = ({addon_id}) => {
            const response = fetch("/wp-json/solea/event-details/print-page/pariticipants-with-addons", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    event_id: result.event_id,
                    addon: addon_id,
                    solea_nonce: _nonce(),
                    link: link
                }),
            })
                .then((res) => res.json())
                .then((data) => {
                    const container = document.getElementById('solea_event_details_content');
                    const root = ReactDOM.createRoot(container);


                    root.render(
                        <ToasterProvider>
                            <div id="solea_event_group_contents">
                                <ParticipationGroupParticipants link={link} result={data.result}
                                                                toast_message={data.message}/>
                            </div>
                        </ToasterProvider>
                    );
                })
    }


    const new_event = (event_id) => {
        const container = document.getElementById('solea_event_details_content');
        const root = ReactDOM.createRoot(container);

        root.render(
            <ToasterProvider>
                <div id="solea_event_group_contents">
                    <NewAddonForm event_id={event_id} />
                </div>
            </ToasterProvider>
        );
    }

    return (
        <div id="solea_event_group_contents">
            <div className="solea-page">
                <h3>{__('Event addons', 'solea')}</h3>
                <table className="wp-list-table widefat fixed striped table-view-list solea_participant_group mb-10">
                    <thead>
                    <tr>
                        <th className="manage-column column-name" scope="col">{ __( 'Name', 'solea' ) }</th>
                        <th className="manage-column column-name">{ __( 'Description', 'solea' ) }</th>
                        <th className="manage-column column-name">{ __( 'Amount', 'solea' ) }</th>
                        <th className="manage-column column-name">{ __( 'Users', 'solea' ) }</th>
                    </tr>
                    </thead>
                    <tbody>
                        { result.addons.map((addon, index) => (
                            <tr>
                                <td>{addon.name}</td>
                                <td>{addon.description}</td>
                                <td>{addon.amount}</td>
                                <td>
                                    {addon.current_users !== 0 ?
                                        (
                                            <label className="solea-link"

                                                   onClick={() => {
                                                       open_users({addon_id: addon.id});
                                                   }}
                                                   title={__( 'Open users', 'solea')}>
                                                {addon.current_users_string}
                                            </label>
                                        ) : (<label class="solea-label-sm">{addon.current_users_string}</label>)
                                    }
                                </td>
                            </tr>

                        ))}
                    </tbody>
                </table>

                <button className="button solea-button" onClick={() =>
                    new_event(result.event_id)}>{__('Add new addon', 'solea')}</button>
            </div>
        </div>
    )
}

export default EventAddons;