import React, { Component } from "react";
import "./App.css";

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

    /* DATABASE */
    const movies = [
      {
        id: 0,
        src:
          "https://image.tmdb.org/t/p/w185_and_h278_bestv2/7WsyChQLEftFiDOVTGkv3hFpyyt.jpg",
        title: "movie one",
        overview: "overview one"
      },
      {
        id: 1,
        src:
          "https://image.tmdb.org/t/p/w185_and_h278_bestv2/7WsyChQLEftFiDOVTGkv3hFpyyt.jpg",
        title: "movie two",
        overview: "overview two"
      },
      {
        id: 2,
        src:
          "https://image.tmdb.org/t/p/w185_and_h278_bestv2/7WsyChQLEftFiDOVTGkv3hFpyyt.jpg",
        title: "movie three",
        overview: "overview three"
      }
    ];

    let movieRows = [];

    /* LOOPING THROUGH DATABASE */
    movies.forEach(item => {
      /* MAKING AN ELEMENT */
      const moveDataTable = (
        <table key={movies.id}>
          <tbody>
            <tr>
              <td>
                <img alt="poster" width="80" src={movies.src} />
              </td>
              <td>{movies.title}</td>
            </tr>
          </tbody>
        </table>
      );
      /* PUSING DATA TO THE LIST */
      movieRows.push(moveDataTable);
      console.log(movieRows);
    });

    this.state = { rows: movieRows };
  }

  render() {
    return (
      <div className="App">
        <table className="App-header">
          <tbody>
            <tr>
              <td>
                <img
                  className="App-logo"
                  alt="app-logo"
                  src="https://cdn3.iconfinder.com/data/icons/social-circle/512/social_4-512.png"
                />
              </td>
              <td>
                <h1 className="App-title">MovieDB</h1>
              </td>
            </tr>
          </tbody>
        </table>
        <input className="Search-bar" placeholder="Enter your search term" />

        <p> {this.state.rows} </p>
      </div>
    );
  }
}

export default App;