import React from 'react'
import { Field, reduxForm } from 'redux-form';

import './reg-form-event.scss';

let RegFormEvent = props => {
    const { handleSubmit, regEventSubmit, eventId } = props;

    const submit = value => {
        value.event = eventId;

        console.log('user-event', value);
        regEventSubmit(value);
    };

    return (
        <form className="form" onSubmit={handleSubmit(submit)}>
             <div>
                <label htmlFor="name">Full name</label>
                <Field name="name" component="input" type="text" id="name"/>
            </div>
            <div>
                <label htmlFor="phone">Phone</label>
                <Field name="phone" component="input" type="phone" id="phone"/>
            </div>
            <div>
                <label htmlFor="email">E-mail</label>
                <Field name="email" component="input" type="text" />
            </div>
            <div>
                <label htmlFor="male">Male</label>
                <Field name="sex" component="input" type="radio" id="male" value="male" checked="checked"/>

                <label htmlFor="female">female</label>
                <Field name="sex" component="input" type="radio" id="female" value="female"/>
            </div>
            <div>
                <label>Distance</label>
                <Field name="distance" component="select">
                    <option value="Half marathone">Half marathone</option>
                    <option value="Marathone">Marathone</option>
                </Field>
            </div>
            <div>
                <label htmlFor="userCountry">Country</label>
                <Field name="userCountry" component="input" type="text" id="userCountry"/>
            </div>
            <div className="btn-group">
                <button className="btn" type="submit">Register</button>
            </div>
        </form>
        )
};

RegFormEvent = reduxForm({
    form: 'regFormEvent'
})(RegFormEvent)

export default RegFormEvent