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);
  const visibility = show ? "d-flex flex-column" : "d-none";
  const icon = show ? "down" : "left"

  return (
    <div className="card mb-3">
      <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-${icon}`}></i>
        </h5>
      </div>
      <div className={`card-body ${visibility}`}>
        {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,
};