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

import { regEventSubmit } from "../../actions/registrationEvent";

import './eventCard.scss';

import Sidebar from '../../components/sidebar/Sidebar';
import Footer from '../../components/footer/Footer';
import RegFormEvent from '../../components/reg-form-event/RegFormEvent';

export class EventCard extends React.Component {
    render() {
        const { event, regEventSubmit } = 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 className="bg-black"></div>
                        </div>
                    </div>            
                    <div className="container-wrap">
                        <div className="event-card-info">
                            <div className="info-content">
                                <p>Age limit: <span>{event.ageLimit}</span></p>
                                <p>Aid stations: <span>{event.aidStations}</span></p>
                                <p>Award medals: <span>{event.awardMedals}</span></p>
                                <p>Equipment storage: <span>{event.equipmentStorage}</span></p>
                                
                                <p>Maximum time: <span>{event.maximumTime}</span></p>
                                <p>Parking: <span>{event.parking}</span></p>
                                <p>Refreshments: <span>{event.refreshments}</span></p>

                                <div className="overview">
                                    <img src={event.mainBannerPicture} alt="banner" />
                                    <p>{event.overview}</p>
                                    {/*{
                                        event.contentVideo && <div className="event-video">
                                            <video controls loop>
                                                <source src={video} type="video/mp4" />
                                                <source src={video} type="video/ogg" />
                                                <source src={video} type="video/webm" />
                                                Your browser does not support the video tag.
                                            </video>
                                        </div>
                                    }*/}
                                </div>
                                
                                {
                                    event.map && <div className="map-wrap">
                                        {/* click open pop-up with map*/}
                                        <img src={event.map} alt="map" />
                                    </div>
                                }

                            </div>
                            <div className="reg-form">
                                <div className="price">
                                    <h3>Price</h3>
                                    {
                                        event.halfmarathoneDistancePrice && <div className="cost">
                                            <h6>Half marathone:</h6>
                                            <span>{event.halfmarathoneDistancePrice}</span>
                                        </div>
                                    }
                                    {
                                        event.marathoneDistancePrice && <div className="cost">
                                            <h6>Marathone:</h6>
                                            <span>{event.marathoneDistancePrice}</span>
                                        </div>
                                    }
                                </div>
                                <div>
                                    <RegFormEvent eventId={event._id} regEventSubmit={regEventSubmit}/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <Footer/>
            </>
        )
    }
}

//export default EventCard;

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

export default connect(
    null,
    { regEventSubmit }
)(EventCard);