import React, { useState } from "react";
import PropTypes from "prop-types";
import { Map } from "immutable";

import { Episode } from "./episode";

export const Season = props => {
  const [show, setShow] = useState(false);

  return (
    <div className="card mb-3 show-season">
      <div className="card-header clickable" onClick={() => setShow(!show)}>
        <h5 className="m-0">
          Season {props.season}
          <small className="text-primary">
            {" "}
            — ({props.data.toList().size} episodes)
          </small>
          <i
            className={`float-right fa fa-chevron-${show ? "down" : "left"}`}
          ></i>
        </h5>
      </div>
      <div className={`card-body ${show ? "d-flex flex-column" : "d-none"}`}>
        {props.data.toList().map(function(episode) {
          let key = `${episode.get("season")}-${episode.get("episode")}`;
          return (
            <Episode
              key={key}
              data={episode}
              showName={props.showName}
              addTorrent={props.addTorrent}
              addToWishlist={props.addToWishlist}
              getEpisodeDetails={props.getEpisodeDetails}
              refreshSubtitles={props.refreshSubtitles}
            />
          );
        })}
      </div>
    </div>
  );
};
Season.propTypes = {
  data: PropTypes.instanceOf(Map),
  season: PropTypes.number,
  showName: PropTypes.string,
  addToWishlist: PropTypes.func,
  addTorrent: PropTypes.func,
  refreshSubtitles: PropTypes.func,
  getEpisodeDetails: PropTypes.func
};