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


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

    return (
        <table>
            <tr>
                <td colSpan="2">
                    <h3>{labels.headlines.personaldata}</h3>
                </td>
            </tr>
            <tr>
                <td>{labels.common.firstname};</td>
                <td><input defaultValue={participant_data.firstname} type="text" name="vorname" id="vorname" /></td>
            </tr>

            <tr>
                <td>{labels.common.lastname}:</td>
                <td><input defaultValue={participant_data.lastname} type="text" name="nachname" id="nachname" /></td>
            </tr>

            <tr>
                <td>{labels.common.nickname}</td>
                <td><input defaultValue={participant_data.nickname} type="text" name="pfadiname" id="pfadiname" /></td>
            </tr>

            <tr>
                <td>{labels.common.localgroup}</td>
                <td>
                    <select id="localgroup" name="localgroup" required placeholder="<?php echo esc_html__( 'Please select', 'solea' ); ?>">
                        <option value="-1">{labels.common.please_select}</option>
                        {local_groups.map((local_group, index) => (
                            <option
                                value={local_group.id}
                                selected={participant_data.localgroup == local_group.id}
                            >{local_group.name}
                            </option>
                        ))
                        }
                </select>
            </td>
        </tr>

    <tr>
        <td>{labels.common.birthday}:</td>
        <td><input defaultValue={participant_data.birthday} type="date" name="geburtsdatum" id="geburtsdatum" /></td>
    </tr>

    <tr>
        <td>{labels.common.street}, {labels.common.housenumber}:</td>
        <td>
            <input type="text" defaultValue={participant_data.street} name="strasse" id="strasse" />
            <input type="text" defaultValue={participant_data.number} name="hausnummer" id="hausnummer" />
        </td>
    </tr>

    <tr>
        <td>
            {labels.common.postal_code}, {labels.common.city}:</td>
        <td>
            <input type="text" defaultValue={participant_data.zip} name="plz" id="plz" />
            <input type="text" defaultValue={participant_data.city} name="ort" id="ort"  />
        </td>
    </tr>

    <tr>
        <td>{labels.common.telephone}:</td>
        <td><input defaultValue={participant_data.phone} type="text" name="telefon_1" id="telefon_1" /></td>
    </tr>

    <tr>
        <td>{labels.common.email}:</td>
        <td><input defaultValue={participant_data.email} type="text" name="email_1" id="email_1" /></td>
    </tr>
    <tr>
        <td colSpan="2">
            <input type="button" value={labels.common.next} onClick= {()  => handle_next_step()} />
        </td>
    </tr>
        </table>
    );
}

export default PersonalDataContainer;