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

import './registrationForm.scss';

let RegistrationForm = props => {
    const { handleSubmit, postCheckInSubmit } = props;

    const submit = value => {
        console.log(value);        
        postCheckInSubmit(value);
    };

    return (
        <form className="form" onSubmit={handleSubmit(submit)}>
            <div>
                <label htmlFor="name">Full name</label>
                <Field name="name" 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"/>

                {/*<Field name="sex" component="select">
                    <option value="male">male</option>
                    <option value="female">female</option>
                </Field>*/}
            </div>
            <div>
                <label htmlFor="phone">Phone</label>
                <Field name="phone" component="input" type="phone" />
            </div>
            <div>
                <label htmlFor="email">E-mail</label>
                <Field name="email" component="input" type="email" />
            </div>
            <div>
                <label htmlFor="password">Password</label>
                <Field name="password" component="input" type="text" />
            </div>
            <div>
                <label htmlFor="confirmPassword">Confirm Password</label>
                <Field name="confirmPassword" component="input" type="text" />
            </div>
            
            <button type="submit">Check in</button>
        </form>
        )
};

RegistrationForm = reduxForm({
    form: 'registration'
})(RegistrationForm)

export default RegistrationForm