import React from "react";
import PropTypes from "prop-types";
import { Map } from "immutable";
import { useDispatch, useSelector } 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";

export const Episode = (props) => {
  const dispatch = useDispatch();

  const trackedSeason = useSelector((state) =>
    state.showStore.getIn(["show", "tracked_season"], null)
  );
  const trackedEpisode = useSelector((state) =>
    state.showStore.getIn(["show", "tracked_episode"], null)
  );

  return (
    <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,
            trackedSeason,
            trackedEpisode
          )}
          wishlist={() =>
            dispatch(
              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,
  showName: PropTypes.string.isRequired,
};