import React from 'react'

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

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="list-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>
        }
        {this.props.movie.torrents && this.props.movie.torrents.map(function(torrent, index) {
          return (
            <a key={torrent.url} type="button" className="btn btn-primary btn-sm" href={torrent.url}>
              <i className="fa fa-download"></i> {torrent.quality} Torrent
            </a>
          )}
        )}
        <a type="button" className="btn btn-warning btn-sm" href={imdb_link}>
          <i className="fa fa-external-link"></i> IMDB
        </a>
      </div>
    );
  }
}

export default class MovieList extends React.Component {
  componentWillMount() {
    if (this.props.moviesUrl) {
      this.props.fetchMovies(this.props.moviesUrl);
    } else if (this.props.params && this.props.params.search != "") {
      this.props.searchMovies({
        key: this.props.params.search
      });
    }
  }
  componentWillUpdate(nextProps, nextState) {
    if (!nextProps.params || nextProps.params.search === "") {
      return
    }
    if (this.props.params.search === nextProps.params.search) {
      return
    }
    this.props.searchMovies({
      key: nextProps.params.search
    });
  }
  render() {
    const movies = this.props.movieStore.movies;
    const selectedMovieId = this.props.movieStore.selectedImdbId;
    let index = movies.map((el) => el.imdb_id).indexOf(selectedMovieId);
    if (index === -1) {
      index = 0;
    }
    const selectedMovie = movies[index];
    return (
      <div className="row" id="container">
        <ListPosters
          data={movies}
          formModel="movieStore"
          controlModel="movieStore.filter"
          controlPlaceHolder="Filter movies..."
          selectedImdbId={selectedMovieId}
          filter={this.props.movieStore.filter}
          perPage={this.props.movieStore.perPage}
          onClick={this.props.selectMovie}
        />
        {selectedMovie &&
          <ListDetails data={selectedMovie}>
            <MovieButtons
              movie={selectedMovie}
              fetching={this.props.movieStore.fetchingDetails}
              getMovieDetails={this.props.getMovieDetails}
            />
          </ListDetails>
        }
      </div>
    );
  }
}