import React from 'react'
import axios from 'axios'

function MoviePosters(props) {
  const movies = props.movies;
  return (
    <div className="col-xs-5 col-md-8">
      <div className="row">
        {movies.map(function(movie, index) {
          const selected = (index === props.selectedMovieIndex) ? true : false;
          return (
            <MoviePoster
              data={movie}
              key={movie.ID}
              selected={selected}
              onClick={() => props.onClick(index)}
            />
          )}
        )}
      </div>
    </div>
  );
}

function MoviePoster(props) {
  const imgUrl = '/img/movies/' + props.data.imdb_id +'.jpg';
  const selected = props.selected ? ' thumbnail-selected' : '';
  const imgClass = 'thumbnail' + selected;
  return (
    <div className="col-xs-12 col-md-3">
      <a className={imgClass}>
        <img src={imgUrl} onClick={props.onClick}/>
      </a>
    </div>
  );
}

function MovieDetails(props) {
  return (
    <div className="col-xs-7 col-md-4">
      <div className="movie-detail affix">
        <h1 className="hidden-xs">{props.data.title}</h1>
        <h3 className="visible-xs">{props.data.title}</h3>
        <p>
          <i className="fa fa-clock-o"></i>
          {props.data.runtime} min
        </p>
        <p>
          <i className="fa fa-star-o"></i>
          {props.data.rating} <small>({props.data.votes} counts)</small>
        </p>
        <p className="movie-plot">{props.data.plot}</p>
      </div>
    </div>
  );
}

export default class MovieList extends React.Component {
  componentWillMount() {
    this.props.fetchMovies();
  }
  render() {
    const movies = this.props.movieStore.movies;
    const index = this.props.movieStore.selectedMovieIndex;
    const selectedMovie = movies[index];
    return (
      <div className="row" id="movie-library">
        <MoviePosters
          movies={this.props.movieStore.movies}
          selectedMovieIndex={index}
          onClick={this.props.selectMovie}
        />
        {selectedMovie &&
          <MovieDetails data={selectedMovie} />
        }
      </div>
    );
  }
}