import React from 'react';
import { ContactDataValidator } from '../../../../assets/javascripts/registration-validator.js'


function GroupBasedRegistrationContainer({ onStepClick, labels, participant_data, local_groups, event_data }) {
    const handle_next_step = () => {
        onStepClick(5);
    }

    return (


        <table>
            <input defaultChecked={"checked"} type="radio" name="beitrag" value="regular" id="amount_regular" hidden />

            <tr>
                <td colSpan="2"><h3>{labels.registration_mode.group_based.headline}:</h3></td>
            </tr>


            {event_data.possible_participation_groups.map((participation_group, index) => (
                <tr>
                    <td colSpan="2" >
                        <input type="radio"
                               defaultChecked={'participant' === participation_group.name}
                               name="participant_group"
                                value={participation_group.name}
                                id={participation_group.name} />

                        <label for={participation_group.name}>
                            {participation_group.name_readable}
                            {participation_group.description !== '' && (
                                <span><br /><span  class="solea-group-info-text">{participation_group.description}</span><br /><br /></span>
                        )}
                        </label>
                    </td>
                </tr>
            ))
            }

    <tr>
        <td colSpan="2">
            <input type="button" value={labels.common.go_back} onClick={() => onStepClick(3)} /> &nbsp;
            <input type="button" value={labels.common.next} onClick= {()  => handle_next_step()} />
        </td>
    </tr>
        </table>
    );
}

export default GroupBasedRegistrationContainer;