import React, {useEffect} from 'react';
import { __ } from '../../../../assets/javascripts/library.js';
import EventOverviewActions from "../components/event-overview-actions.jsx";
import EventOverview from "../overview.jsx";
import {useToaster} from "../../global-components/toaster.jsx";

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

    return (
        <div className="solea_event_overview">
            <div className="solea_event_overview_details">
                <h3>{__('Participants', 'solea')}</h3>
                <table id="solea_event_overview_table">
                {result.event.participation_groups.map((participation_group, index) => (
                    <tr>
                        <th>{participation_group.name}:</th>
                        <td>{participation_group.participants.length}</td>
                    </tr>
                ))}
                    <tr>
                        <th>{__('Amount', 'solea')}:</th>
                        <td>{result.event.amount_overall_paid}  / {result.event.amaount_overall_total}</td>
                    </tr>
                </table>
            </div>
            <div  className="solea_event_overview_control" id="solea-action-buttons">
                <EventOverviewActions event={result.event} />
            </div>
            {result.date}
        </div>
    )
}

export default Overview;