import React, { Component } from "react";
import { connect } from "react-redux";
// import { reduxForm, Field } from "redux-form";
import "./adminMyEventsPage.scss";
// import { Link } from "react-router-dom";
import { Redirect } from 'react-router-dom'
import * as actions from "../../actions/adminMainPageActions";
import AdminHeader from "../../components/adminHeader/adminHeader";
import Form from "../../components/eventForm/eventReduxForm";
// import AdminEventElement from "../../components/adminEventElement/adminEventElement";
import ConfirmationMessage from "../../components/confirmationMessage/confirmationMessage";
// import {customSelect} from "../../components/customFields/customSelect/customSelect";
import EventInfoShort from "../../components/eventInfoShort/EventInfoShort";

class AdminAddEventPage extends Component {

    state = {
        confirmationMessageFlag: false,
        editFormFlag: false
    };


    componentDidMount() {
        this.props.getEvents();
    }

    // resetInitValue = () => this.setState({ eventFormInitialValue: {} });

    // showConfirmationMessage = () => this.setState({confirmationMessageFlag: true });
    // closeConfirmationMessage = () => this.setState({confirmationMessageFlag: false });


    // editItem = item =>
    // this.setState(prevState => ({
    //     ...prevState,
    //     showFormFlag: true,
    //     eventList: prevState.eventList.map(el => (el.id === item.id ? item : el))
    // }));

    // setInitialValues = id =>
    // this.setState(prevState => {
    //     console.log('prevState', prevState)
    //     return {
    //     ...prevState,
    //     eventFormInitialValue: prevState.eventList.find(el => el._id === id)
    // }});

    render() {
        const {
            postNewEvent,
            eventList,
            editEvent,
            eventFormInitialValue,
            editFormFlag,
            eventTypes
        } = this.props

        console.log('eventList', eventList)
        // console.log('confirmationMessageFlag', this.state.confirmationMessageFlag)

        // console.log("eventFormInitialValue", eventFormInitialValue);
        return (
            <>
                <AdminHeader />
                <div className="event-page">
                    <div className="event-page__content">
                        <h2 className="event-page__title">MY EVENTS</h2>

                        <div className="events-list">
                            {eventList && eventList.map(el =>
                                <div className="event-page__container" key={el._id}>

                                    <EventInfoShort
                                        key={el._id}
                                        title={el.title}
                                        country={el.country}
                                        city={el.city}
                                        id={el._id}
                                        eventDate={el.eventDate}
                                        imgSrc={el.mainBannerPicture}
                                        values={eventFormInitialValue}
                                    />
                                    <div className="event-buttons-conteiner">
                                        <button className="event-button" onClick={editEvent.bind(null, el._id)} >Edit Event</button>
                                        <button className="event-button" >Delete Event</button>
                                    </div>

                                </div>
                            )}
                        </div>

                        {editFormFlag && <Redirect to='/admin/add_new_event' /> 
                            // <Form
                            //     eventFormInitialValue={eventFormInitialValue}
                            //     eventTypes={eventTypes}

                            //     postNewEvent={postNewEvent}
                            //     editItem={this.editItem}
                            //     resetInitValue={this.resetInitValue}
                            //     showConfirmationMessage={this.showConfirmationMessage}
                            // />
                        }
                    </div>
                </div>

                {this.state.confirmationMessageFlag &&
                    <ConfirmationMessage closeMessage={this.closeConfirmationMessage}>
                        <div className="text">Event has beed changed.</div>
                    </ConfirmationMessage >}
            </>
        );
    }
}

const mapStateToProps = state => ({
    eventList: state.adminMainPageReducer.eventList,
    eventFormInitialValue: state.adminMainPageReducer.eventFormInitialValue,
    eventTypes: state.adminMainPageReducer.eventTypes,
    editFormFlag: state.adminMainPageReducer.editFormFlag,
});

export default connect(mapStateToProps, actions)(AdminAddEventPage);