import React from 'react';
import { connect } from "react-redux";

import { getAllReviews, postReviewSubmit } from "../../actions/reviews";
import { getAllEvents } from "../../actions/getAllEvents";

import './reviews.scss';

import Sidebar from '../../components/sidebar/Sidebar';
import Footer from '../../components/footer/Footer';
import ReviewForm from '../../components/review-form/ReviewForm';
//import FiltersEvents from '../../components/filtersEvents/FiltersEvents';

export class Reviews extends React.Component {
    componentDidMount() {
        this.props.getAllReviews();
        this.props.getAllEvents();
    }

    render() {
        const { postReviewSubmit, events, reviews } = this.props;
        const eventsArr = events.map(event => ({
            title: event.title,
            id: event._id
        }));
        //console.log(Array.from(reviews).reverse());
        return (
            <>
                <Sidebar/>
                <div className="container-wrap events">
                    <div className="caption-page">
                        <h2>Reviews page</h2>
                    </div>
                </div>
                <div className="container-wrap">

                    {/*<div className="events-filters">
                        <h4>Events filter</h4>
                        <FiltersEvents labelType="Event Title" getRequest={getAllEvents} eventTypes={eventTypes} />
                    </div>*/}

                    <div className="reviews-wrap">
                        {
                            Array.from(reviews).reverse().map((reviewer, ind) => ind < 10 &&
                                <div className="reviews-item" key={ind}>
                                    <div className="review-content">
                                        <div className="reviews-name">{reviewer.name}</div>
                                        <div className="reviews-date">
                                            <i className="fa fa-calendar-o" aria-hidden="true"></i>
                                        { new Date(reviewer.date).toDateString().slice(4) }
                                        </div>
                                        <div className="reviews-text">{reviewer.text}</div>
                                    </div>
                                </div>
                            )
                        }
                    </div>
                    <div className="reviews-wrap-add">
                        <h3>Send your reviews</h3>
                        <ReviewForm postReviewSubmit={postReviewSubmit} eventsArr={eventsArr}/>
                    </div>
                </div>
                <Footer/>
            </>
        )
    }
}

const mapStateToProps = state => {
    return {
        reviews: state.allReviews.reviews,
        events: state.getEvents.events,
        reloadPage: state.allReviews.reloadPage
    };
};

export default connect(
    mapStateToProps,
    { getAllReviews, postReviewSubmit, getAllEvents }
)(Reviews);