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


function SummaryContainer({ onStepClick, labels, participant_data, local_groups }) {
    const handle_next_step = () => {
        onStepClick(4);

        if (ContactDataValidator()) {
            onStepClick(4);
        }
    }

    return (
        <table>
            <tr>
                <td colSpan="2">
                    <h3>{labels.headlines.summary}</h3>
                </td>
            </tr>
            <tr>
                <td>{labels.summary.event_name}:</td>
                <td><span id="summary_eventname" /></td>
            </tr>

            <tr>
                <td>{labels.summary.arrival}</td>
                <td><span id="summary_arrival" /></td>
            </tr>

            <tr>
                <td>{labels.summary.departure}:</td>
                <td><span id="summary_departure" /></td>
            </tr>
            <tr><td colSpan="2"><br /><br /></td></tr>
            <tr>
                <td colSpan="2">
                    <input type="checkbox" id="summary_information_correct"/>
                    <label htmlFor="summary_information_correct" id="summary_information_correct_label">
                        {labels.summary.information_correct}
                    </label>
                </td>
            </tr>

            <tr>
                <td colSpan="2">
                    <input type="checkbox" id="summary_accept_terms"/>
                    <label htmlFor="summary_accept_terms" id="summary_accept_terms_label">
                        {labels.summary.accept_terms}
                    </label>
                </td>
            </tr>

            <tr>
                <td colSpan="2">
                    <input type="checkbox" id="legal_accepted"/>
                    <label htmlFor="legal_accepted" id="legal_accepted_label">
                        {labels.summary.legal_acceptance}
                    </label>
                </td>
            </tr>

            <tr>
                <td colSpan="2">
                    <input type="checkbox" id="payment"/>
                    <label htmlFor="payment" id="payment_label">
                        {labels.summary.amount_text_1} <span class="bold" id="payment_information_label"></span> {labels.summary.amount_text_2}
                    </label>
                </td>
            </tr>
        </table>
    );
}

export default SummaryContainer;