import './defaults.css'
import './App.css'
import { MovieWall } from './objects/movie-wall'
import { useState, useEffect } from 'react'
import tmdb from './objects/tmdb'
import { Sidebar } from './objects/sidebar'
import { Movie } from './objects/movie-wall'

export type Config = {
  language: string,
  region: string,
  page: number,
}
class MovieClass implements Movie {
  id = null
  poster_path = null
  backdrop_path = null
  title = null
  overview = null
}

function App() {
  const [config, setConfig] = useState<Config>({
    language: "es",
    region: "spain",
    page: 1
  })
  const [movies, setMovies] = useState([new MovieClass()])
  const [backdrop, setBackdrop] = useState("")
  const [chosenMovie, setChosenMovie] = useState(new MovieClass())
  const [loadedMovies, setLoadedMovies] = useState(0)

  useEffect(() => { tmdb.getPopular(config, setMovies) }, [])
  useEffect(() => {
    setLoadedMovies(movies.length)
    if (movies[0].backdrop_path) {
      setBackdrop(tmdb.makeBgImgUrl(movies[0].backdrop_path))
    }
  }, [movies])
  return (
    <>
      <header>
        <h1>Movie Explorer</h1>
      </header>
      <main style={{ backgroundImage: backdrop }}>
        <div id="movie-wall-container">
          {loadedMovies === movies.length ?
            <MovieWall movies={movies}
              setMovies={setMovies}
              config={config}
              setChosenMovie={setChosenMovie}
              setLoadedMovies={setLoadedMovies}
            />
            : "LOADING  " + loadedMovies} </div>
        <Sidebar movie={chosenMovie} />
      </main>

    </>
  )
}

export default App