import React from "react"
import PropTypes from "prop-types"
import { Map } from "immutable"
import { connect } from "react-redux"

import Loader from "../loader/loader"

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

const mapStateToProps = (state) => ({
  loading: state.showStore.get("loading"),
  show: state.showStore.get("show"),
})

const showDetails = ({ show, loading }) => {
  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 = {
  loading: PropTypes.bool,
  show: PropTypes.instanceOf(Map),
};
export const ShowDetails = connect(mapStateToProps)(showDetails);