import React from 'react'
import { Link } from 'react-router'

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

function ShowButtons(props) {
  const imdbLink = `http://www.imdb.com/title/${props.show.imdb_id}`;
  return (
    <div className="list-details-buttons btn-toolbar">
      <a type="button" className="btn btn-warning btn-sm" href={imdbLink}>
        <i className="fa fa-external-link"></i> IMDB
      </a>
      <Link type="button" className="btn btn-primary btn-sm" to={"/shows/details/" + props.show.imdb_id}>
        <i className="fa fa-external-link"></i> Details
      </Link>
    </div>
  );
}

export default class ShowList extends React.Component {
  componentWillMount() {
    this.props.fetchShows(this.props.showsUrl);
  }
  render() {
    const shows = this.props.showStore.shows;
    const selectedShowId = this.props.showStore.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}
          formModel="showStore"
          controlModel="showStore.filter"
          controlPlaceHolder="Filter shows..."
          selectedImdbId={selectedShowId}
          filter={this.props.showStore.filter}
          perPage={this.props.showStore.perPage}
          onClick={this.props.selectShow}
        />
        {selectedShow &&
          <ListDetails data={selectedShow} >
            <ShowButtons show={selectedShow} />
          </ListDetails>
        }
      </div>
    );
  }
}