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
);