import React from 'react';
import AmountSelectorContainer from "../components/amount-selector.jsx";

function AddonsContainer({ onStepClick, labels, event_data }) {
    const handle_next_step = () => {
            onStepClick(7);
        }


    return (
        <p>
            {event_data.registration_mode === 'solidarity' && (
                <AmountSelectorContainer event_data={event_data} labels={labels} />
            )}

            {event_data.addons.length > 0 && (
                <p>
                    <h3>{labels.addons.addons.available_addons}</h3>
                    <table>
                        {event_data.addons.map((addon, index) => (
                            <tr>
                                <td class="addon_checkbox">
                                    <input type="checkbox"
                                           name={"addons["+addon.id+"]"}
                                           id={"addons_"+addon.id} />
                                </td>
                                <td class="addon_description">
                                    <label for={"addons_"+addon.id}>
                                        <span class="bold">{addon.name}</span><br />
                                        <span class="small">{labels.common.amount}: {addon.amount}</span><br /><br />
                                        {addon.description}<br /><br />
                                    </label>
                                </td>
                            </tr>
                        ))
                        }
                    </table>
                </p>
            )}
            <input type="button" value={labels.common.go_back} onClick={() => onStepClick(5)} /> &nbsp;
            <input type="button" value={labels.common.next} onClick= {()  => handle_next_step()} />
        </p>
    );
}



export default AddonsContainer;