import React from 'react'
import { Switch, Route } from "react-router-dom";
import { connect } from "react-redux";

import { getAllEvents } from "./actions/getAllEvents";

import AdminMainPage from './conteiners/adminMainPage/adminMainPage';
import AdminAddEventPage from './conteiners/adminAddEventPage/adminAddEventPage';
import AdminMyEventsPage from './conteiners/adminMyEventsPage/adminMyEventsPage';

import Home from './conteiners/home/Home';
import Result from './conteiners/result/Result';
import Gallery from './conteiners/gallery/Gallery';
import Reviews from './conteiners/reviews/Reviews';
import Login from './conteiners/login/Login';
import RegistrationPage from './conteiners/registrationPage/RegistrationPage';
import Events from './conteiners/events/Events';
import EventCard from './conteiners/eventCard/EventCard';

import Profile from './conteiners/profile/Profile';

import AdminAddPhotogalarytPage from "./conteiners/adminPhotogalaryPage/adminPhotogalaryPage"

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

    render() {
        const { events } = this.props;
		return(
			<div className="container">
			    <Switch>
                    <Route exact path="/" render={props => (
                        <Home events={events} />
                    )} />

                    <Route exact path="/events" render={ props => (
                        <Events events={events} />
                    )} />

                    <Route exact path="/result" component={Result} />
                    <Route exact path="/gallery" component={Gallery} />
                    <Route exact path="/reviews" component={Reviews} />

                    {
                        events.map(event =>
                            <Route exact
                                path={`/events/${event._id}`}
                                key={event._id}
                                render={ props => (<EventCard event={event} />) }
                            />                            
                        )
                    }

                    <Route exact path="/login" component={Login} />
                    <Route exact path="/registration" component={RegistrationPage} />

                    <Route exact path="/profile" component={Profile} />
                    
			           
			        <Route exact path = '/admin' component = {AdminMainPage} />
			        <Route exact path = '/admin/add_new_event' component = {AdminAddEventPage} />
			        <Route exact path = '/admin/photogalary' component = {AdminAddPhotogalarytPage} />
					<Route exact path = '/admin/my_events' component = {AdminMyEventsPage} />
			            
			    </Switch>
			</div>
		)
	}
}

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

export default connect(
    mapStateToProps,
    { getAllEvents }
)(Router);