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


function ContactPersonContainer({ onStepClick, labels, participant_data }) {
    const handle_next_step = () => {

        if (ContactPersonValidator() ) {
            onStepClick(3);
        }
    }

    return (
        <table>
            <tr>
                <td colSpan="2">
                    <h3>{labels.headlines.contactperson}</h3>
                </td>
            </tr>
            <tr>
                <td>{labels.common.lastname}, {labels.common.firstname}:</td>
                <td><input type="text" name="ansprechpartner" id="ansprechpartner" /></td>
            </tr>

            <tr>
                <td>{labels.common.telephone}:</td>
                <td><input type="text" name="telefon_2" id="telefon_2" /></td>
            </tr>
            <tr>
                <td>{labels.common.email}:</td>
                <td><input type="text" name="email_2" id="email_2"/></td>
            </tr>

            <tr>
                <td>{labels.swimming_permission.label}:</td>
                <td>
                    <select name="badeerlaubnis" id={"swimming_permission"}>
                        <option value="-1">{labels.common.please_select}</option>
                        <option value="none">{labels.swimming_permission.none}</option>
                        <option value="partial">{labels.swimming_permission.partial}</option>
                        <option value="complete">{labels.swimming_permission.complete}</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>{labels.swimming_permission.first_aid_headline}:
                </td>
                <td>
                    <select id="first_aid" name="first_aid" required>
                        <option value="-1">{labels.common.please_select}</option>
                        <option value="1">{labels.swimming_permission.first_aid_yes}</option>
                        <option value="0">{labels.swimming_permission.first_aid_no}</option>
                    </select><br />
                    <label className="description">{labels.swimming_permission.first_aid_description}</label>
                </td>
            </tr>

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

export default ContactPersonContainer;