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

import './eventCard.scss';

import Sidebar from '../../components/sidebar/Sidebar';

export class EventCard extends React.Component {
    render() {
        const { event } = this.props;
        const dateArr = new Date(event.eventDate).toDateString().split(' ');
        console.log( event );
        return (
            <>
                <Sidebar />
                <div className="event-card">
                    <div className="event-card-cap">
                        <div className="event-card-img">
                            <img src={event.mainBannerPicture} alt="banner" />
                        </div>
                        <div className="event-card-title">
                            <div className="container-wrap">
                                <h2>{event.title}</h2>
                                <p className="country">{event.country}, {event.city}</p>
                                <p className="event-type">{event.eventType}</p>
                                <div className="date">
                                    <p>
                                        {
                                            dateArr.map(
                                                (el, ind) => ind > 0 ? <span key={ind}>{el} </span> : null
                                            )
                                        }
                                    </p>
                                </div>
                                <div>
                                    <button>Register</button>
                                </div>
                            </div>
                        </div>
                    </div>            
                    <div className="container-wrap">
                        <div className="event-card-info">
                            <p>{event.ageLimit}</p>
                            <p>{event.aidStations}</p>
                            <p>{event.awardMedals}</p>
                            <p>{event.equipmentStorage}</p>
                            <p>{event.halfmarathoneDistancePrice}</p>
                            <p>{event.marathoneDistancePrice}</p>
                            <p>{event.maximumTime}</p>
                            <p>{event.overview}</p>
                            <p>{event.parking}</p>
                            <p>{event.refreshments}</p>

                            {/*{event.contentVideo}
                             {event.mainBannerPicture}
                             {event.map}
                             */}
                        </div>
                    </div>
                </div>
            </>
        )
    }
}

export default EventCard;

/*const mapStateToProps = state => {
    return {
        events: state.getEvents.events
    };
};

export default connect(
    mapStateToProps,
    { getAllEvents }
)(Events);*/