import React, { useState } from "react";
import PropTypes from "prop-types";
import { useSelector } from "react-redux";

import { Episode } from "./episode";

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

  const episodeNumbers = useSelector((state) =>
    Array.from(state.show.show.seasons.get(season).keys())
  );

  const showToggle = () => {
    setShow(!show);
  };

  return (
    <div className="card mb-3 show-season">
      <div className="card-header clickable" onClick={showToggle}>
        <h5 className="m-0">
          Season {season}
          <small className="text-primary">
            {" "}
            — ({episodeNumbers.length} 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"}`}>
        {episodeNumbers.map((episode) => (
          <Episode
            key={`${season}-${episode}`}
            season={season}
            episode={episode}
          />
        ))}
      </div>
    </div>
  );
};
Season.propTypes = {
  season: PropTypes.number.isRequired,
};