import React, { useEffect } from "react";
import PropTypes from "prop-types";
import { useSelector, useDispatch } from "react-redux";

import {
  fetchMovieDetails,
  getMovieDetails,
  movieWishlistToggle,
} from "../../actions/movies";
import { searchMovieSubtitle } from "../../actions/subtitles";

import Loader from "../loader/loader";

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

import { DownloadAndStream } from "../buttons/download";
import { ImdbBadge } from "../buttons/imdb";
import { TorrentsButton } from "../buttons/torrents";
import { SubtitlesButton } from "../buttons/subtitles";
import { ShowMore } from "../buttons/showMore";

export const MovieDetails = ({ match }) => {
  const dispatch = useDispatch();
  const loading = useSelector((state) => state.movie.loading);
  const fanartUrl = useSelector((state) => state.movie.movie.fanart);

  useEffect(() => {
    dispatch(fetchMovieDetails(match.params.imdbId));
  }, [dispatch, match]);

  if (loading) {
    return <Loader />;
  }

  return (
    <React.Fragment>
      <Fanart url={fanartUrl} />
      <Header />
    </React.Fragment>
  );
};

MovieDetails.propTypes = {
  match: PropTypes.object.isRequired,
};

export const Header = () => {
  const dispatch = useDispatch();
  const {
    audioCodec,
    container,
    fetchingDetails,
    fetchingSubtitles,
    genres,
    imdb_id: imdbId,
    plot,
    polochon_url: polochonUrl,
    poster_url: posterUrl,
    quality,
    rating,
    runtime,
    size,
    subtitles,
    title,
    torrents,
    videoCodec,
    votes,
    wishlisted,
    year,
    release_group: releaseGroup,
  } = useSelector((state) => state.movie.movie);

  const inLibrary = polochonUrl !== "";

  if (!imdbId || imdbId === "") {
    return null;
  }

  return (
    <div className="col-12 col-lg-10 offset-lg-1 mb-3">
      <div className="d-flex flex-column flex-md-row">
        <div className="d-flex justify-content-center">
          <img className="overflow-hidden object-fit-cover" src={posterUrl} />
        </div>

        <div className="ml-sm-1">
          <div className="card-body">
            <p className="card-title">
              <Title
                title={title}
                wishlisted={wishlisted}
                wishlist={() =>
                  dispatch(movieWishlistToggle(imdbId, wishlisted))
                }
              />
            </p>
            <p className="card-text">
              <ReleaseDate date={year} />
            </p>
            <p className="card-text">
              <Runtime runtime={runtime} />
            </p>
            <p className="card-text">
              <Genres genres={genres} />
            </p>
            <p className="card-text">
              <Rating rating={rating} votes={votes} />
            </p>
            <div className="card-text">
              <ImdbBadge imdbId={imdbId} />
              <DownloadAndStream
                url={polochonUrl}
                name={title}
                subtitles={subtitles}
              />
            </div>
            <div className="card-text mt-2">
              <DownloadProgress imdbId={imdbId} />
            </div>
            <p className="card-text">
              <TrackingLabel inLibrary={inLibrary} wishlisted={wishlisted} />
            </p>
            <p className="card-text">
              <PolochonMetadata
                quality={quality}
                releaseGroup={releaseGroup}
                container={container}
                audioCodec={audioCodec}
                videoCodec={videoCodec}
                size={size}
              />
            </p>
            <p className="card-text">
              <Plot plot={plot} />
            </p>
            <div className="card-text">
              <ShowMore id={imdbId} inLibrary={inLibrary}>
                <TorrentsButton
                  torrents={torrents}
                  searching={fetchingDetails}
                  search={() => dispatch(getMovieDetails(imdbId))}
                  url={`#/torrents/search/movies/${encodeURI(title)}`}
                />
                <SubtitlesButton
                  inLibrary={inLibrary}
                  fetchingSubtitles={fetchingSubtitles}
                  subtitles={subtitles}
                  search={(lang) => dispatch(searchMovieSubtitle(imdbId, lang))}
                />
              </ShowMore>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};