import React from "react"
import PropTypes from "prop-types"
import { Map } from "immutable"
import { connect } 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) => (
  <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={() => props.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),
  showWishlistToggle: PropTypes.func,
};

export const Header = connect(null, {showWishlistToggle})(header);