import React 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 { showWishlistToggle } from "../../../actions/shows";

export const Header = () => {
  const dispatch = useDispatch();
  const posterUrl = useSelector((state) => state.show.show.poster_url);
  const title = useSelector((state) => state.show.show.title);
  const imdbId = useSelector((state) => state.show.show.imdb_id);
  const year = useSelector((state) => state.show.show.year);
  const rating = useSelector((state) => state.show.show.rating);
  const plot = useSelector((state) => state.show.show.plot);

  const trackedSeason = useSelector((state) => state.show.show.tracked_season);
  const trackedEpisode = useSelector(
    (state) => state.show.show.tracked_episode
  );
  const wishlisted = useSelector(
    (state) =>
      state.show.show.tracked_season !== null &&
      state.show.show.tracked_episode !== 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} />
            </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>
  );
};