movie-explorer/src/objects/whereToWatch.tsx

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

interface WhereToWatchProps extends React.ComponentPropsWithRef<"div"> {
  watchProviders: {
    flatrate: Array<{}>;
    rent: Array<{}>;
    buy: Array<{}>;
    link: string;
  };
}
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) {
  console.log("Watch providers exist?" + watchProvidersExist(watchProviders))
  if (!watchProvidersExist(watchProviders)) {
    console.group()
    console.log("Watch providers (WhereToWatch)")
    console.log(watchProviders)
    console.groupEnd()
    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>
  </>
}