import './defaults.css'
import './App.css'
import './spinner.css'
import { MovieWall } from './objects/movie-wall'
import React, { 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
  vote_average = 0
}

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

  useEffect(() => { tmdb.getPopular(config, setMovies) }, [])
  useEffect(() => {
    const bgString = chosenMovie.backdrop_path ?
      tmdb.makeBgImgUrl(chosenMovie.backdrop_path)
      : tmdb.makeBgImgUrl(movies[0]?.backdrop_path ?? "")
    setBackdrop(prev => {
      console.log("NEW PREVIMG: " + prev.currImg)
      console.log("NE CURRIMG: " + bgString)
      return {
        prevImg: prev.currImg,
        currImg: bgString
      }
    })
  }, [movies])

  interface BackgroundProps extends React.ComponentPropsWithRef<"div"> {
    backDrop: {
      currImg: string;
      prevImg: string;
    }
  }
  const Background = (props: BackgroundProps) => {
    return <div id="background">
      <img id="current-bg" src={props.backDrop.currImg} />
      <img id="previous-bg" src={props.backDrop.prevImg} />
    </div>
  }
  return (
    <>
      <Background backDrop={backdrop} />
      <div id="loader"></div>
      <div className='main-container'>
        <main >
          <Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} />
          <div id="movie-wall-container">
            <MovieWall movies={movies}
              setMovies={setMovies}
              config={config}
              setChosenMovie={setChosenMovie}
              setSimilarMoviesAvailable={setSimilarMoviesAvailable}
            />
          </div>
        </main>
      </div>
    </>
  )
}

export default App