import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, Link, IndexLink, IndexRoute, hashHistory} from 'react-router';

const users = [
    {id: 1, name: 'Marcin'},
    {id: 2, name: 'Tomasz'},
    {id: 3, name: 'Ania'},
    {id: 5, name: 'Klaudia'}
];

class Main extends React.Component {
    render() {
        return <h1>Main</h1>;
    }
}

class Contact extends React.Component {
    render() {
        return <h1>Contact us at contact@example.com</h1>;
    }
}

class NotFound extends React.Component {
    render() {
        return <h1>404, <Link to="/">wroc do strony glownej</Link></h1>
    }
}

class Template extends React.Component {
    render() {
        console.log(this.props.route.users, 'Template');
        const style = {
            backgroundColor: "red",
            border: "4px solid green"
        };

        const menu = this.props.route.users.map(u => {
            return <li key={u.id}>
                <IndexLink activeStyle={style} to={"/users/"+u.id}>{u.name}</IndexLink>
            </li>
        })

        return (<div>
                <h1>App</h1>
                <nav>
                    <ul>
                        <li><IndexLink activeStyle={ style } to="/">strona głowna</IndexLink></li>
                        <li><IndexLink activeStyle={ style } to="/contact">kontakt</IndexLink></li>
                        {menu}
                    </ul>
                </nav>
                {this.props.children}
            </div>)
    }
}

class UserInfo extends React.Component {
    render() {
        return <p>ID: {this.props.params.userId}</p>
    }
}

class App extends React.Component {
    render() {
        console.log(this.props.users);
        return <Router history={hashHistory}>
            <Route path="/" component={Template} users={this.props.users}>
                <IndexRoute component={Main}/>
                <Route path="/contact" component={Contact}/>
                <Route path="/users/:userId" component={UserInfo}/>
                <Route path="*" component={NotFound}/>
            </Route>
        </Router>;
    }
}

document.addEventListener('DOMContentLoaded', function(){
    ReactDOM.render(
        <App users={users}/>,
        document.getElementById('app')
    );
});