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

import { showWishlistToggle } from "../../../actions/shows"

import { inLibrary, isEpisodeWishlisted, 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"

const mapStateToProps = (state) => ({
  trackedSeason: state.showStore.getIn(["show", "tracked_season"], null),
  trackedEpisode: state.showStore.getIn(["show", "tracked_episode"], null),
})

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")}`}
        wishlisted={isEpisodeWishlisted(
          props.data,
          props.trackedSeason,
          props.trackedEpisode,
        )}
        wishlist={() => props.showWishlistToggle(
          isEpisodeWishlisted(props.data),
          props.data.get("show_imdb_id"),
          props.data.get("season"),
          props.data.get("episode"),
        )}
      />
      <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,
  trackedSeason: PropTypes.number,
  trackedEpisode: PropTypes.number,
  showName: PropTypes.string.isRequired,
  showWishlistToggle: PropTypes.func,
};

export const Episode = connect(mapStateToProps, {showWishlistToggle})(episode);