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

import { inLibrary, isWishlisted } from "../../utils";

import { DownloadAndStream } from "../buttons/download";
import { ImdbBadge } from "../buttons/imdb";

import { TrackingLabel } from "../details/tracking";
import { Genres } from "../details/genres";
import { Plot } from "../details/plot";
import { PolochonMetadata } from "../details/polochon";
import { Rating } from "../details/rating";
import { ReleaseDate } from "../details/releaseDate";
import { Runtime } from "../details/runtime";
import { Title } from "../details/title";

const ListDetails = (props) => {
  if (props.data === undefined) {
    return null;
  }
  if (props.loading) {
    return null;
  }

  return (
    <div className="col-8 col-md-4 list-details pl-1 d-flex align-items-start flex-column video-details flex-fill flex-column flex-nowrap">
      <Title
        title={props.data.get("title")}
        wishlist={props.wishlist}
        wishlisted={isWishlisted(props.data)}
      />
      <ReleaseDate date={props.data.get("year")} />
      <Runtime runtime={props.data.get("runtime")} />
      <Genres genres={props.data.get("genres")} />
      <Rating
        rating={props.data.get("rating")}
        votes={props.data.get("votes")}
      />
      <div>
        <ImdbBadge imdbId={props.data.get("imdb_id")} />
        <DownloadAndStream
          url={props.data.get("polochon_url")}
          name={props.data.get("title")}
          subtitles={props.data.get("subtitles")}
        />
      </div>
      <TrackingLabel
        wishlisted={props.data.get("wishlisted")}
        inLibrary={inLibrary(props.data)}
        trackedSeason={props.data.get("tracked_season")}
        trackedEpisode={props.data.get("tracked_episode")}
      />
      <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")}
      />
      <Plot plot={props.data.get("plot")} />
      {props.children}
    </div>
  );
};
ListDetails.propTypes = {
  data: PropTypes.instanceOf(Map),
  wishlist: PropTypes.func,
  loading: PropTypes.bool,
  children: PropTypes.object,
};
export default ListDetails;