import React from 'react';

import './home.scss';

import Sidebar from '../../components/sidebar/Sidebar';
import EventInfoShort from '../../components/eventInfoShort/EventInfoShort';
import logo from '../../assets/img/logo.png';
import bgVideo from '../../assets/img/bg-video.mp4';

export default class Home extends React.Component {
    state = {
        videoURL: 'https://gcs-vimeo.akamaized.net/exp=1564565194~acl=%2A%2F1021052489.mp4%2A~hmac=f6d3e53b00695ca1e6920c195176211b64e179e250acfcdaf35bb334a60cac3f/vimeo-prod-skyfire-std-us/01/2799/9/238996987/1021052489.mp4'
    }

    render() {
        const { events } = this.props;
        return (
            <>
                <Sidebar history={this.props.history}/>
                <div className="hero">
                    <div className="container-wrap">
                        <div className="hero-wrap">
                            <div className="hero-logo">
                                <img src={logo} alt="logo"/>
                                <h3><span>Just</span>tri it</h3>
                            </div>
                            <h1>International competitions among professionals and amateurs</h1>
                        </div>                
                    </div>                    

                    <div className="bg"></div>
                    <div className="bg-img"></div>

                    <video id="background-video" loop autoPlay>
                        <source src={bgVideo} type="video/mp4" />
                        <source src={bgVideo} type="video/ogg" />
                        Your browser does not support the video tag.
                    </video>
                </div>
                <div className="container-wrap home events">
                    <div className="events-content">
                        <h4>Last Events</h4>

                        <div className="events-list">
                            {
                                events.reverse().map( (event,ind) => ind < 6 && <EventInfoShort
                                    key={event._id}
                                    title={event.title}
                                    country={event.country}
                                    city={event.city}
                                    id={event._id}
                                    eventDate={event.eventDate}
                                    imgSrc={event.mainBannerPicture} />
                                )
                            }
                        </div>
                    </div>
                </div>
            </>
        )
    }
}
