import React, { Component } from "react";
import { Router } from "@reach/router"; // Remember this import when using <Router>
import Recipe from "./components/Recipe ";

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

    // This is my state data initialized
    this.state = {
      recipes: [
        // descriptions could be better...
        { id: 1, title: "Pizza", description: "How to make pizza..." },
        { id: 2, title: "Soup", description: "How to make soup..." },
        { id: 3, title: "Cake", description: "How to make cake..." }
      ]
    };

    console.log(this.state.recipes.find(e => e.id === Number(3)));
  }

  getRecipe(id) {
    // Basically, go over all elements in 'this.state.recipe' and find the element
    // that matches 'e.id === Number(id)' where 'e' is one of the objects in 'this.state.recipes'
    return this.state.recipes.find(e => e.id === Number(id)); // And then return it
  }

  render() {
    return (
      <React.Fragment>
        <h1>Recipe App!</h1>
        <Router>
          {/* Writing JavaScript comments inside JSX is a bit weird as you can see */}

          {/* When using 'this.props.loadRecipe()' from inside Recipe, it actually uses this
                        arrow function below */}
          <Recipe path="/recipe/:id" loadRecipe={id => this.getRecipe(id)} />

          {/* <Recipes> below has not been implemented yet, so it is commented out*/}
          {/*<Recipes path="/recipes" recipes={this.state.recipes}></Recipes>*/}
        </Router>
      </React.Fragment>
    );
  }
}

export default App;