import React from 'react';
import User from './User';

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Navigation from './Navigation';
import Footer from './Footer';
import Home from './Home';
import About  from './About';

export class App extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            userList: [
              {name: "Hugo", counter: 0},
              {name: "Bert", counter: 0},
              {name: "Sepp", counter: 0},
              {name: "Lisa", counter: 0},
              {name: "Susi", counter: 0},
              
            ]
        }
    }
    
    doClick(idx){
      let listCopy = this.state.userList.slice();
      listCopy[idx].counter++;
      this.setState({userList: listCopy})
    }
    
    hello(){
      return <p>hello</p>
    }
    
    render(){
        return (
          <div>
              <Router>
                <Navigation />
                <Switch>
                  <Route path="/" exact component={Home} />
                  <Route path="/about" exact component={About} />
                </Switch>
                <Footer />
              </Router>
              
              {this.props.title}
              {this.state.userList.map((user, idx) =>
                  <User
                      name={user.name}
                      counter={user.counter}
                      doClick={() => this.doClick(idx)}
                      app={this}
                      title={this.props.title}
                  />
                )}
          </div>
        )
    }

}