import React, { useEffect, useRef, useState } from "react";
import "./Row.css";
import axios from "./axios";
import ArrowForwardIosIcon from "@material-    ui/icons/ArrowForwardIos";
import YouTube from "react-youtube";
import movieTrailer from "movie-trailer";
import { ContactlessOutlined, MovieSharp } from "@material-    ui/icons";
function Row({ title, fetchUrl, isLargeRow = false }) {
  const [movies, setMovies] = useState([]);
  const [trailerUrl, setTrailerUrl] = useState("");
  const [trailerList, setTrailerList] = useState("");

  const base_url = "https://image.tmdb.org/t/p/original/";

  const posterRowRef = useRef();


  const handleClick = (movie) => {
console.log(movie.videoUrl);

if (trailerUrl) {
  setTrailerUrl("");
} else {
  console.log(movie);
  movieTrailer(null, {
    tmdbId: movie.id,
    apiKey: "***************************",
  }).then((url) => {
    console.log("URL", url);
  });
}
  };


  useEffect(() => {
    async function fetchData() {
      let request = await axios.get(fetchUrl);

      request.data.results.forEach((movie, index) => {
        movieTrailer(null, {
          tmdbId: movie.id,
          apiKey: "***************************",
        }).then((response) => {
          if (response == null) {
            movie["videoUrl"] = null;
          } else {
            movie["videoUrl"] = response;
            setMovies([...movies, movie]);
          }
        });
      });
      // setMovies(request.data.results);

      return request;
    }
    fetchData();
  }, [trailerUrl]);

  return (
<div className="row">
  <h2>{title}</h2>{" "}
  <div ref={posterRowRef} className="row__posters">
    {movies.map((movie, index) => {
      // console.log(trailerList[index]?.videoUrl);
      return (
        <img
          key={movie.id}
          onClick={() => handleClick(movie)}
          className={`row__poster ${isLargeRow && "row__posterLarge"}`}
          src={`${base_url}${
            isLargeRow ? movie.poster_path : movie.backdrop_path
          }`}
          alt=""
        />
      );
    })}
  </div>
</div>
  );
}

export default Row;