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

import { Plot } from "../../details/plot";
import { Rating } from "../../details/rating";
import { ReleaseDate } from "../../details/releaseDate";
import { Title } from "../../details/title";
import { TrackingLabel } from "../../details/tracking";

import { ImdbBadge } from "../../buttons/imdb";
import { Refresh } from "../../buttons/refresh";

import {
  showWishlistToggle,
  fetchShowDetails,
  getShowDetails,
} from "../../../actions/shows";

export const Header = () => {
  const dispatch = useDispatch();
  const {
    poster_url: posterUrl,
    title,
    imdb_id: imdbId,
    year,
    rating,
    plot,
    tracked_season: trackedSeason,
    tracked_episode: trackedEpisode,
    fetchingDetails,
  } = useSelector((state) => state.show.show);

  useEffect(() => {
    if (fetchingDetails === false) {
      dispatch(fetchShowDetails(imdbId));
    }
  }, [fetchingDetails, imdbId, dispatch]);

  const wishlisted = trackedSeason !== null && trackedEpisode !== null;

  return (
    <div className="card col-12 col-md-10 offset-md-1 mt-n3 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>
          <div className="card-body">
            <p className="card-title">
              <Title
                title={title}
                wishlisted={wishlisted}
                wishlist={() =>
                  dispatch(showWishlistToggle(wishlisted, imdbId))
                }
              />
            </p>
            <p className="card-text">
              <ReleaseDate date={year} />
            </p>
            <p className="card-text">
              <Rating rating={rating} />
            </p>
            <p className="card-text">
              <ImdbBadge imdbId={imdbId} />
              <Refresh
                onClick={() => dispatch(getShowDetails(imdbId))}
                loading={fetchingDetails}
                kind="info"
              />
            </p>
            <p className="card-text">
              <TrackingLabel
                inLibrary={false}
                trackedSeason={trackedSeason}
                trackedEpisode={trackedEpisode}
              />
            </p>
            <p className="card-text">
              <Plot plot={plot} />
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};