movie-explorer/src/objects/movie-wall.tsx

import React, { useState } from "react"
import { relocateArrayItem } from "../functions"

type Movie = {
  id: string
  poster_path: string
  title: string
  overview: string
}

const sampleData = {
  adult: false,
  backdrop_path: "/jnE1GA7cGEfv5DJBoU2t4bZHaP4.jpg",
  genre_ids: [28, 878],
  id: 1094844,
  original_language: "en",
  original_title: "Ape vs. Mecha Ape",
  overview: "Recognizing the destructive power of its captive giant Ape, the military makes its own battle-ready A.I., Mecha Ape. But its first practical test goes horribly wrong, leaving the military no choice but to release the imprisoned giant ape to stop the colossal robot before it destroys downtown Chicago.",
  popularity: 2157.099,
  poster_path: "/dJaIw8OgACelojyV6YuVsOhtTLO.jpg",
  release_date: "2023-03-24",
  title: "Ape vs. Mecha Ape",
  video: false,
  vote_average: 5.538,
  vote_count: 52
}

interface MovieWallProps extends React.ComponentPropsWithRef<"div"> {
  movies: Array<Movie>;
  setMovies: Function;
}

export function MovieWall({ movies, setMovies }: MovieWallProps) {

  function moveMovieToFront(index: number) {
    setMovies((prev: Array<Movie>) => { return relocateArrayItem(prev, index, 0) })
  }

  function listSimilarMovies(movie: Movie) {


  }

  const posters: Array<React.Component> = []
  for (let i = 0; i < movies.length; i++) {
    const movie = movies[i]
    posters.push(
      <Poster movie={movie} key={movie.id} index={i} moveMovieToFront={moveMovieToFront} />
    )
  }
  return <>
    {posters}
  </>
}

interface PosterProps extends React.ComponentPropsWithRef<"div"> {
  movie: Movie;
  moveMovieToFront: Function;
  index: number;
}


function Poster({ movie, index, moveMovieToFront: onclick }: PosterProps) {
  const [style, setStyle] = useState({
    backgroundImage: "url(https://image.tmdb.org/t/p/w500/" + movie.poster_path + ")",
    backgroundSize: "cover",
    alignSelf: "auto",
    color: "inherit"
  })
  return <div className="poster" style={style}>
    <div className="overlay" onClick={() => { onclick(index) }}>
      <h1>{movie.title}</h1>
      <p>{movie.overview}</p>

    </div>
  </div>
}