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

import './review-form.scss';

import { customInput } from "../customFields/customInput/customInput";
import { customTextarea } from "../customFields/customTextarea/customTextarea";
import { customSelect } from "../customFields/customSelect/customSelect";

let ReviewForm = props => {
    const { handleSubmit, postReviewSubmit, eventsArr, reset } = props;
    //console.log(props);

    const submit = value => {
        value.date = new Date();
        //console.log(value);
        postReviewSubmit(value);
        reset()
    };

    return (
        <form className="form" onSubmit={handleSubmit(submit)}>
            <div>
                <Field name="event" label="Event Title" component={customSelect}>
                    <option>Select Event</option>
                    {eventsArr.map(elem => <option key={elem.id} value={elem.id}>{elem.title}</option>)}
                </Field>
            </div>
            <Field name="name" label="Full name"  type="text" id="name" component={customInput} />
            <Field name="text" label="Your message" type="text" id="text" component={customTextarea} />

            <div className="btn-group">
                <button type="submit" className="btn">Send</button>
            </div>
        </form>
        )
};

ReviewForm = reduxForm({
    form: 'reviewForm'
})(ReviewForm)

export default ReviewForm