import React, { Component } from 'react';
import Header from './Header';
import {
  BrowserRouter as Router, Route,
  Switch,
} from 'react-router-dom';
import Map from '../Routes/Map';
import Home from '../Routes/Home';
import Vegetables from '../Routes/Vegetables';
import Vegetable from '../Routes/Vegetable';

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      background: 1
    }

    this.changeBackground.bind = this.changeBackground();
  }

  changeBackground = () => {
    setInterval(() => {
      let currentBackground = this.state.background;
      document.body.style.background = `url('/background/${currentBackground}.jpg') no-repeat fixed`;
      document.body.style.backgroundSize = 'cover';
      document.body.style.backgroundPosition = 'center center';

      if (currentBackground === 4) {
        currentBackground = 0
      }
      this.setState({
        background: currentBackground + 1
      })
    }, 10000);
  }

  render() {
    return (
      <div className="App">
        <Header></Header>
        <Router>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/carte" component={Map} />
            <Route exact path="/vegetaux/:typeId-:typeSlug" component={Vegetables} />
            <Route exact path="/vegetaux/:typeId-:typeSlug/:vegetableId-:vegetableSlug" component={Vegetable} />
          </Switch>
        </Router>
      </div>
    );
  }
}

export default App;