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

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

import './reviews.scss';

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

const reviewsInitial = [
    {
        name: "Unknown Raccoon",
        date: new Date("07-10-2019").toDateString().slice(4),
        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
    {
        name: "Htoto Echo",
        date: new Date("07-29-2019").toDateString().slice(4),
        text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    },
    {
        name: "Vasya Petrovich",
        date: new Date("08-06-2019").toDateString().slice(4),
        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
    {
        name: "Petya Petrov",
        date: new Date("08-07-2019").toDateString().slice(4),
        text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    },
    {
        name: "Tanya Sash",
        date: new Date("08-08-2019").toDateString().slice(4),
        text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    }
]

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

    render() {
        const { postReviewSubmit } = this.props;
        //const { reviews, postReviewSubmit } = this.props;
        //console.log(reviews);
        return (
            <>
                <Sidebar/>
                <div className="container-wrap events">
                    <div className="caption-page">
                        <h2>Reviews page</h2>
                    </div>
                </div>
                <div className="container-wrap">
                    <div className="reviews-wrap">
                        {
                            reviewsInitial.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>
                                            {reviewer.date}
                                        </div>
                                        <div className="reviews-text">{reviewer.text}</div>
                                    </div>
                                </div>
                            )
                        }
                    </div>
                    <div className="reviews-wrap-add">
                        <h3>Send your reviews</h3>
                        <ReviewForm postReviewSubmit={postReviewSubmit}/>
                    </div>
                </div>
                <Footer/>
            </>
        )
    }
}

const mapStateToProps = state => {
    return {
        reviews: state.allReviews.reviews
    };
};

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