import React from "react"
import PropTypes from "prop-types"
import { Map } from "immutable"

import { inLibrary, prettyEpisodeName } from "../../../utils"

import { Plot } from "../../details/plot"
import { PolochonMetadata } from "../../details/polochon"
import { ReleaseDate } from "../../details/releaseDate"
import { Runtime } from "../../details/runtime"
import { Title } from "../../details/title"

import { DownloadAndStream } from "../../buttons/download"
import { ShowMore } from "../../buttons/showMore"

import { EpisodeSubtitlesButton } from "./subtitlesButton"
import { EpisodeThumb } from "./episodeThumb"
import { EpisodeTorrentsButton } from "./torrentsButton"

export const Episode = (props) => (
  <div className="d-flex flex-column flex-lg-row mb-3 pb-3 border-bottom border-light">
    <EpisodeThumb url={props.data.get("thumb")} />
    <div className="d-flex flex-column">
      <Title
        title={`${props.data.get("episode")}. ${props.data.get("title")}`}
        xs
      />
      <ReleaseDate date={props.data.get("aired")} />
      <Runtime runtime={props.data.get("runtime")} />
      <Plot plot={props.data.get("plot")} />
      <DownloadAndStream
        name={prettyEpisodeName(props.showName, props.data.get("season"), props.data.get("episode"))}
        url={props.data.get("polochon_url")}
        subtitles={props.data.get("subtitles")}
      />
      <PolochonMetadata
        quality={props.data.get("quality")}
        releaseGroup={props.data.get("release_group")}
        container={props.data.get("container")}
        audioCodec={props.data.get("audio_codec")}
        videoCodec={props.data.get("video_codec")}
        light
      />
      <ShowMore
        id={prettyEpisodeName(props.showName, props.data.get("season"), props.data.get("episode"))}
        inLibrary={inLibrary(props.data)}
      >
        <EpisodeTorrentsButton
          torrents={props.data.get("torrents")}
          showName={props.showName}
          imdbId={props.data.get("show_imdb_id")}
          season={props.data.get("season")}
          episode={props.data.get("episode")}
          searching={props.data.get("fetching")}
        />
        <EpisodeSubtitlesButton
          subtitles={props.data.get("subtitles")}
          inLibrary={inLibrary(props.data)}
          searching={props.data.get("fetchingSubtitles", false)}
          imdbId={props.data.get("show_imdb_id")}
          season={props.data.get("season")}
          episode={props.data.get("episode")}
        />
      </ShowMore>
    </div>
  </div>
)
Episode.propTypes = {
  data: PropTypes.instanceOf(Map).isRequired,
  showName: PropTypes.string.isRequired,
};