import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { selectShow, addShowToWishlist,
  deleteShowFromWishlist, getShowDetails } from '../../actions/shows'

import ListDetails from '../list/details'
import ListPosters from '../list/posters'
import ShowButtons from './listButtons'

function mapStateToProps(state) {
  return { showsStore: state.showsStore };
}
const mapDispatchToProps = (dispatch) =>
  bindActionCreators({ selectShow, addShowToWishlist,
  deleteShowFromWishlist, getShowDetails }, dispatch)

class ShowList extends React.Component {
  render() {
    const shows = this.props.showsStore.shows;
    const selectedShowId = this.props.showsStore.selectedImdbId;
    let index = shows.map((el) => el.imdb_id).indexOf(selectedShowId);
    if (index === -1) {
      index = 0;
    }
    const selectedShow = shows[index];

    return (
      <div className="row" id="container">
        <ListPosters
          data={shows}
          type="shows"
          formModel="showsStore"
          filterControlModel="showsStore.filter"
          filterControlPlaceHolder="Filter shows..."
          exploreOptions={this.props.showsStore.exploreOptions}
          selectedImdbId={selectedShowId}
          filter={this.props.showsStore.filter}
          perPage={this.props.showsStore.perPage}
          onClick={this.props.selectShow}
          router={this.props.router}
          params={this.props.params}
          loading={this.props.showsStore.loading}
        />
        {selectedShow &&
          <ListDetails data={selectedShow} >
            <ShowButtons
              show={selectedShow}
              deleteFromWishlist={this.props.deleteShowFromWishlist}
              addToWishlist={this.props.addShowToWishlist}
              getDetails={this.props.getShowDetails}
              fetching={this.props.showsStore.getDetails}
            />
          </ListDetails>
        }
      </div>
    );
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(ShowList);