import React from "react"
import tmdb from "./tmdb"
import { Config } from "../App"

export interface WatchProviders {
  flatrate: Array<{}>;
  rent: Array<{}>;
  buy: Array<{}>;
  link: string;
}
interface WhereToWatchProps extends React.ComponentPropsWithRef<"div"> {
  watchProviders: WatchProviders;
  config: Config;
}
// const sampleData = {
//   link: "https://www.themoviedb.org/movie/872585-oppenheimer/watch?locale=ES",
//   rent: [{
//     logo_path: "/7K6rVbpWXB6ByDI0PRzGGRXRBSY.jpg",
//     provider_id: 149,
//     provider_name: "Movistar Plus",
//     display_priority: 12
//   }],
//   buy: [{
//     logo_path: "/9ghgSC0MA082EL6HLCW3GalykFD.jpg",
//     provider_id: 2,
//     provider_name: "Apple TV",
//     display_priority: 4
//   },
//   {
//     logo_path: "/bZvc9dXrXNly7cA0V4D9pR8yJwm.jpg",
//     provider_id: 35,
//     provider_name: "Rakuten TV",
//     display_priority: 13
//   },
//   {
//     logo_path: "/8z7rC8uIDaTM91X0ZfkRf04ydj2.jpg",
//     provider_id: 3,
//     provider_name: "Google Play Movies",
//     display_priority: 15
//   },
//   {
//     logo_path: "/5vfrJQgNe9UnHVgVNAwZTy0Jo9o.jpg",
//     provider_id: 68,
//     provider_name: "Microsoft Store",
//     display_priority: 16
//   },
//   {
//     logo_path: "/seGSXajazLMCKGB5hnRCidtjay1.jpg",
//     provider_id: 10,
//     provider_name: "Amazon Video",
//     display_priority: 36
//   }],
//   flatrate: [{
//     logo_path: "/gQbqEYd0C9uprYxEUqTM589qn8g.jpg",
//     provider_id: 1773,
//     provider_name: "SkyShowtime",
//     display_priority: 9
//   }]
// }
interface ProviderIconsProps extends React.ComponentPropsWithRef<"div"> {
  providerList: Array<{}>;
  link: string;
}
function ProviderIcons({ providerList, link }: ProviderIconsProps) {
  const list = providerList.map((e: any, i: number) => {
    return <div className="watch-logo">
      <a href={link}>
        <img src={tmdb.makeLogoPath(e.logo_path)} key={e.provider_id + "_" + i} /></a>
    </div>
  })
  return <div className="watch-logos-container">
    {list}
  </div>
}
function watchProvidersExist(watchProviders: any) {
  return watchProviders?.link

}
export function WhereToWatch({ watchProviders, config }: WhereToWatchProps) {
  if (!watchProvidersExist(watchProviders)) {
    return <p>{config.language == "es" ? "Por el momento no hay opciónes streaming." : config.language == "en" ? "There are no online viewing options right now." : ""}</p>
  }
  return <><footer id="sidebar-footer">
    <div id="watch-providers-container">
      {watchProviders?.flatrate?.length > 0 ? <div className="watch-providers"><h1>Streaming:</h1><ProviderIcons providerList={watchProviders.flatrate} link={watchProviders.link} /></div> : ""}
      {watchProviders?.rent?.length > 0 ? <div className="watch-providers"><h1>{config.language == "es" ? "Alquiler:" : config.language == "en" ? "To Rent:" : ""}</h1><ProviderIcons providerList={watchProviders.rent} link={watchProviders.link} /></div> : ""}
      {watchProviders?.buy?.length > 0 ? <div className="watch-providers"><h1>{config.language == "es" ? "Comprar:" : config.language == "en" ? "To Buy:" : ""}</h1><ProviderIcons providerList={watchProviders.buy} link={watchProviders.link} /></div> : ""}
    </div>
    <p>Powered by Just Watch.</p>
  </footer>
  </>
}