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


function ArrivalContainer({ onStepClick, labels, event_data }) {
    const handle_next_step = () => {
        if (ArrivalDepratureValidator(

            new Date(event_data.date_begin),
            new Date (event_data.date_end)
            ) ) {
            if (event_data.addons.length > 0 || event_data.registration_mode === 'solidarity') {
                onStepClick(6);
            } else {
                onStepClick(7);
            }

        }
    }

    return (
        <table>
            <tr>
                <td colSpan="2">
                    <h3>{labels.headlines.arrival}</h3>
                </td>
            </tr>

            <tr>
                <td>{labels.arrival_data.arrival.headline}:</td>
                <td>
                    <input type="date" name="anreise" id="anreise" defaultValue={event_data.date_begin} /><br />
                    <select name="anreise_essen">
                        <option Value="1" selected>{labels.arrival_data.arrival.before_dinner}</option>
                        <option value="2">{labels.arrival_data.arrival.before_lunch}</option>
                        <option value="3">{labels.arrival_data.arrival.before_breakfast}</option>
                        <option value="4">{labels.arrival_data.arrival.no_meal}</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>{labels.arrival_data.departure.headline}:</td>
                <td>
                    <input type="date" name="abreise" id="abreise" defaultValue={event_data.date_end} /><br />
                    <select name="abreise_essen">
                        <option value="1">{labels.arrival_data.departure.after_breakfast}</option>
                        <option selected value="2">{labels.arrival_data.departure.after_lunch}</option>
                        <option value="3">{labels.arrival_data.departure.after_dinner}</option>
                        <option value="4">{labels.arrival_data.departure.no_meal}</option>
                    </select>
                </td>
            </tr>

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

export default ArrivalContainer;