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


function AllergiesContainer({ onStepClick, labels, event_data, participant_data }) {
    const handle_next_step = () => {
        onStepClick(9);
    }

    return (
        <table>
            <tr>
                <td colSpan="2">
                    <h3>{labels.headlines.allergies}</h3>
                </td>
            </tr>
            <tr>
                <td>{labels.allergies.allergies}:</td>
                <td><input defaultValue={participant_data.allergies} type="text" name="allergien" /></td>
            </tr>
            <tr>
                <td>{labels.allergies.intolerances}:</td>
                <td><input defaultValue={participant_data.intolerances} type="text" name="intolerances" /></td>
            </tr>
            <tr>
                <td>{labels.allergies.medications}:</td>
                <td>
                    <input defaultValue={participant_data.medications} type="text" name="medikamente" />*<br />
                    {labels.allergies.medications_hint}
                </td>
            </tr>

            <tr>
                <td>{labels.allergies.eating_habits.headline}:</td>
                <td>
                    <select name="essgewohnheit">
                        <option value="vegetarian">{labels.allergies.eating_habits.vegetarian}</option>
                        <option value="vegan">{labels.allergies.eating_habits.vegan}</option>
                        {event_data.enable_all_eating && (
                            <option value="all">{labels.allergies.eating_habits.meat}</option>
                        )}
                    </select>
                </td>
            </tr>

            <tr>
                <td>{labels.allergies.notices}:</td>
                <td><textarea rows="15" name="anmerkungen"></textarea></td>
            </tr>
            <tr>
                <td colSpan="2">
                    <input type="button" value={labels.common.go_back} onClick={() => onStepClick(7)} /> &nbsp;
                    <input type="button" value={labels.common.next} onClick= {()  => handle_next_step()} />
                </td>
            </tr>
        </table>
    );
}

export default AllergiesContainer;