import React, { Component } from "react";
import { reduxForm, Field } from "redux-form";
import "./adminPhotogalary.scss";
import { addPhotogalaryInitialValue } from "../../state/photogalaryFormData";
import { customInput } from "../customFields/customInput/customInput";
import { customSelect } from "../customFields/customSelect/customSelect";
import { eventTypes } from "../../state/addEventInitialValue";

class PhotogalaryReduxForm extends Component {

    state = {
        addPhotogalaryInitialValue
    }


    submit = e => {
        // this.props.submitHandler(addPhotogalaryInitialValue);
    };

    onChangeHandler = e => {
        const { name, value, id } = e.target;

        this.setState(prevState => {

            return {
                ...prevState,
                addPhotogalaryInitialValue: {
                    ...prevState.addPhotogalaryInitialValue,
                    [name]: value,
                    pictures: prevState.addPhotogalaryInitialValue.pictures.map(el => (el.id === id ? { ...el, value } : el))
                }
            };
        });
    };

    addPicture = (e) => {
        this.setState(prevState => ({
            ...prevState,
            addPhotogalaryInitialValue: {
                ...prevState.addPhotogalaryInitialValue,
                pictures: prevState.addPhotogalaryInitialValue.pictures.concat({
                    id: Math.random()
                        .toString()
                        .substr(2, 100),
                    value: ""
                })
            }
        }));
    };

    render() {
        const { addPhotogalaryInitialValue } = this.state;
        console.log(this.state)

        const { handleSubmit } = this.props;

        return (
            <form className="event-form__event-form__main" onSubmit={handleSubmit(this.submit)}>

            <Field name="eventType" label="Event Type" required component={customSelect} onChange = {this.onChangeHandler} >
                {eventTypes.map(elem => <option key={elem.id} value={elem.optionName}>{elem.optionName}</option>)}
            </Field>
            <Field name="eventTytle" label="Event Title" required component={customInput}  onChange = {this.onChangeHandler} />

            {addPhotogalaryInitialValue.pictures.map((el, i) => (
                <Field key={`${el.id}/${i}`}  name="pictures" label="Picture" onChange = {this.onChangeHandler} className="input-box__wide" placeholder='Enter picture url' component={customInput} />
            ))}
            <button type="button" className="photogalary-form__picture-btn" onClick={this.addPicture} >Add Picture</button>
            <div className="event-form__control-box">
                <button className="event-form__submit-btn" >Add Event</button>
            </div>
        </form>
           
        );
    }
}

export default reduxForm({ form: "photogalaryForm", enableReinitialize: true })(PhotogalaryReduxForm);