import React from "react";
import { Movie } from "./movie-wall";
import tmdb from "./tmdb";
import { WatchProviders, WhereToWatch } from "./whereToWatch";
import CrossfadeImage from 'react-crossfade-image'
import { Config } from "../App";

export interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
  movie: Movie;
  similarMoviesAvailable: boolean;
  watchProviders: WatchProviders;
  config: Config;
  className: string
}
export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config, className }: SidebarProps) {
  const apology = config.language == "es" ?
    "Resumen no disponible" :
    config.language == "en" ?
      "Summary unavailable." :
      ""
  return <div id="sidebar" className={className}>
    <h1 className="font-bold text-lg my-4 h-14 overflow-hidden">{movie?.title ?? "loading"}</h1>
    <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer" className="w-72 aspect-poster flex justify-center">
      <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} style={{
        objectFit: "clip",
        height: "100%"
      }} />
    </a>
    {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
    <p id="summary" className="h-44 overflow-scroll mt-4 p-2">{movie.overview === null ? "Loading"
      : movie.overview === "" ? apology
        : movie.overview}
    </p>
    <WhereToWatch watchProviders={watchProviders} config={config} className="w-full h-32 flex flex-col justify-end mb-4" />
  </div >


}