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

function MoviePosters(props) {
  // TODO handle the limit from the url
  const perPage = 30;

  let movies;
  // Let's limit the number for now
  if (props.movies.length > perPage) {
    movies = props.movies.slice(0, perPage);
  } else {
    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 selected = props.selected ? ' thumbnail-selected' : '';
  const imgClass = 'thumbnail' + selected;
  return (
    <div className="col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <a className={imgClass}>
        <img
          src={props.data.poster_url}
          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.movie.title}</h1>
        <h3 className="visible-xs">{props.movie.title}</h3>
        <p>
          <i className="fa fa-clock-o"></i>
          &nbsp;{props.movie.runtime} min
        </p>
        <p>
          <i className="fa fa-star-o"></i>
          &nbsp;{props.movie.rating} <small>({props.movie.votes} counts)</small>
        </p>
        <p className="movie-plot">{props.movie.plot}</p>
      </div>
      <MovieButtons {...props} />
    </div>
  );
}

class MovieButtons extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(e) {
    e.preventDefault();
    if (this.props.fetching) {
      return
    }
    this.props.getMovieDetails(this.props.movie.imdb_id);
  }
  render() {
    const imdb_link = 'http://www.imdb.com/title/' + this.props.movie.imdb_id;
    return (
      <div className="movie-details-buttons btn-toolbar">
        <a type="button" className="btn btn-default btn-sm" onClick={this.handleClick}>
          {this.props.fetching ||
            <span>
              <i className="fa fa-refresh"></i> Refresh
            </span>
          }
          {this.props.fetching &&
            <span>
              <i className="fa fa-spin fa-refresh"></i> Refreshing
            </span>
          }
        </a>
        {this.props.movie.polochon_url !== "" &&
          <a type="button" className="btn btn-primary btn-sm" href={this.props.movie.polochon_url}>
            <i className="fa fa-download"></i> Download
          </a>
        }
        <a type="button" className="btn btn-warning btn-sm" href="#">
          <i className="fa fa-external-link"></i> IMDB
        </a>
      </div>
    );
  }
}

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