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 } = e.target;
        // console.log('eventInput',e)
        this.setState(prevState => {
            // console.log('prevStateInput', prevState)
            return {
                ...prevState,
                addPhotogalaryInitialValue: {
                    ...prevState.addPhotogalaryInitialValue,
                    [ name ]: value
                }
            };
        });
    };

    onChangePicturesHandler = e => {
        const { value, id } = e.target;
        // console.log('eventPicture',e)
        this.setState(prevState => {
            // console.log('prevStatePicture', prevState)
            return {
                ...prevState,
                addPhotogalaryInitialValue: {
                    ...prevState.addPhotogalaryInitialValue,
                    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),
                    name: `picture ${Math.random()
                        .toString()
                        .substr(2, 100)}`,
                    value: ""
                })
            }
        }));
    };

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

        const { handleSubmit, eventTypes } = 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={el.name}
                    id={el.id} 
                    label="Picture" 
                    onChange = {this.onChangePicturesHandler} 
                    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);