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

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

import { showWishlistToggle } from "../../../actions/shows";

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";

export const Header = (props) => {
  const dispatch = useDispatch();
  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={props.data.get("poster_url")}
          />
        </div>
        <div>
          <div className="card-body">
            <p className="card-title">
              <Title
                title={props.data.get("title")}
                wishlisted={isWishlisted(props.data)}
                wishlist={() =>
                  dispatch(
                    showWishlistToggle(
                      isWishlisted(props.data),
                      props.data.get("imdb_id")
                    )
                  )
                }
              />
            </p>
            <p className="card-text">
              <ReleaseDate date={props.data.get("year")} />
            </p>
            <p className="card-text">
              <Rating rating={props.data.get("rating")} />
            </p>
            <p className="card-text">
              <ImdbBadge imdbId={props.data.get("imdb_id")} />
            </p>
            <p className="card-text">
              <TrackingLabel
                inLibrary={false}
                trackedSeason={props.data.get("tracked_season")}
                trackedEpisode={props.data.get("tracked_episode")}
              />
            </p>
            <p className="card-text">
              <Plot plot={props.data.get("plot")} />
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};
Header.propTypes = {
  data: PropTypes.instanceOf(Map),
};