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

import Loader from "../loader/loader";

import { Fanart } from "./details/fanart";
import { Header } from "./details/header";
import { SeasonsList } from "./details/seasons";

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

export const ShowDetails = ({ match }) => {
  const dispatch = useDispatch();
  const loading = useSelector((state) => state.showStore.get("loading"));
  const show = useSelector((state) => state.showStore.get("show"));

  useEffect(() => {
    dispatch(fetchShowDetails(match.params.imdbId));
  }, [dispatch, match]);

  if (loading === true) {
    return <Loader />;
  }

  return (
    <React.Fragment>
      <Fanart url={show.get("fanart_url")} />
      <div className="row no-gutters">
        <Header data={show} />
        <SeasonsList data={show} />
      </div>
    </React.Fragment>
  );
};
ShowDetails.propTypes = {
  match: PropTypes.object.isRequired,
};