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


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

    return (
        <table>
            <tr>
                <td colSpan="2">
                    <h3>{labels.headlines.solidarity_headline}</h3>
                </td>
            </tr>
            <tr>
                <td>{labels.registration_mode.solidarity.headline}...</td>
                <td>
                    {event_data.possible_participation_groups.map((participation_group, index) => (
                        <span>
                            <input
                                class="registratration_mode_solidatory_checkbox"
                                type="radio"
                                name="participant_group"
                                value="team"
                                defaultChecked={'participant' === participation_group.name}
                                id={participation_group.name}
                            />

                            <label for={participation_group.name}>...{participation_group.description}</label><br/>
                            </span>
                    ))
                    }
                </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 SolidarityRegistrationContainer;