'use strict';

//-----------------------------------
// List of Movies
//-----------------------------------
import React, { Component } from 'react';
import PropTypes from 'prop-types';
// import { Route, Switch } from 'react-router-dom';
import _ from 'lodash';

//--------------
import MoviesHeader from './MoviesHeader';
import MovieCard from './MovieCard';
// import helpers from '../../utils/helpers';
import services from '../../services';

const propTypes = {
  match: PropTypes.object.isRequired
};


class Movies extends Component {

  constructor(props){
    super(props);

    this.state = {
      movies: []
    };

  }

  componentDidMount() {
    this.getData();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps) {
      this.getData();
    }
  }


  getData() {

    // If Filter by Type
    if (this.props.match.params.genre) {
      services.getByGenre(this.props.match.params.genre) // it gets the param :name from the url
      .then(data => {
        this.setState((state, props) => {
          // return { movies: data }
          return {
            movies: _.sortBy(data, [obj => obj.Title])
          }
        });
      });
    }

    // Default Route / All Movies
    else {
      services.getAll()
      .then(data => {
        this.setState((state, props) => {
          return {
            movies: data
          }
        });
      });
    }
  }


  render() {
    if (!this.state.movies) {
      return <div>:[ There are no movies</div>
    }

    const moviesList = this.state.movies.map( (movie, index) => (
      <MovieCard key={ movie.imdbID } { ...movie } />
    ));

    return (
      <div className="page--movies">

        <MoviesHeader
          totalMovies={ this.state.movies.length }
          { ...this.props }
        />

        <div className="component-movies">
          <div className="container">
            <div className="tile is-ancestor movie-tiles-container">
              { moviesList }
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Movies.propTypes = propTypes;

export default Movies;

@@ -503,16 +503,17 @@
 ed%0A%7D;%0A%0A%0A
+%0A
 class Mo
@@ -624,24 +624,25 @@
    %7D;%0A%0A  %7D%0A%0A
+%0A
   componentD
@@ -678,16 +678,17 @@
 );%0A  %7D%0A%0A
+%0A
   compon
@@ -694,55 +694,112 @@
 nent
-WillReceiveProps(nextProps) %7B%0A    if (nextProps
+DidUpdate(prevProps, prevState) %7B%0A    if (prevProps.match.params.genre !== this.props.match.params.genre
 ) %7B%0A
@@ -845,16 +845,38 @@
 Data() %7B
+%0A    let sortedMovies;
 %0A%0A    //
@@ -889,19 +889,20 @@
 lter by 
-Typ
+Genr
 e%0A    if
@@ -996,70 +996,177 @@
 nre)
- // it gets the param :name from the url%0A      .then(data =%3E %7B
+%0A      .then(data =%3E %7B%0A%0A        // Sort Movies by title ASC%0A        sortedMovies = _.sortBy(data, %5Bobj =%3E obj.Title%5D);%0A%0A        // Update Movies State with the new Array
 %0A   
@@ -1208,45 +1208,8 @@
 %3E %7B%0A
-          // return %7B movies: data %7D%0A
     
@@ -1247,42 +1247,20 @@
 es: 
-_.
 sort
-By(data, %5Bobj =%3E obj.Title%5D)
+edMovies
 %0A   
@@ -1259,32 +1259,33 @@
 vies%0A          %7D
+;
 %0A        %7D);%0A   
@@ -1294,24 +1294,25 @@
  %7D);%0A    %7D%0A%0A
+%0A
     // Defau
@@ -1531,24 +1531,25 @@
  render() %7B%0A
+%0A
     if (!thi

FIX Component update method when movies are filtered by Genre.