import React, { Component } from 'react';

// MODULES

// COMPONENTS
import VideoList from './components/video_list/video_list';
import Dashboard from './components/dashboard/dashboard';
import Navbar from './components/navbar/navbar';
import SearchBar from './components/search_bar/search_bar';
import VideoModal from './components/video_detail/video_modal';

// REDUX
import { connect } from 'react-redux';
// import reducer from './reducers/reducer';

// CSS/Other Resources
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      movieSelected: undefined,
    };

    // this.handlePick = this.handlePick.bind(this);
  }

  handleCloseDetail = () => {
    this.setState({ movieSelected: undefined });
  };

  handlePick = () => {
    this.setState({ movieSelected: this.movieData.imdbID });
  };

  // RENDER
  render() {
    return (
      <div className="body">
        <Navbar />
        <Dashboard />
        <SearchBar />
        {this.props.movie && <VideoList movieSelected={this.state.movieSelected} handlePick={this.handlePick} />}
        <VideoModal movieSelected={this.state.movieSelected} handleCloseDetail={this.handleCloseDetail} />
      </div>
    );
  }
}
// REDUX

function mapStateToProps(state) {
  return state;
}

// EXPORT

// export default App;

// REDUX EXPORT

export default connect(mapStateToProps)(App);

import React, { Component } from 'react';
import Slider from 'react-slick';

// MODULES

// COMPONENTS

// REDUX
import { connect } from 'react-redux';

// CSS/Other Resources

class VideoList extends Component {
  constructor(props) {
    super(props);
    console.log(this.props.handlePick);
    this.handlePick = this.handlePick.bind(this);
  }

  handlePick() {
    this.props.handlePick();
  }

  renderMovies(movieData) {
    return (
      <div className="col-md-3" key={movieData.imdbID}>
        <div className="well text-center">
          <img src={movieData.Poster} alt="Card image cap" />
          <h5>
            {movieData.Title} ({movieData.Year})
          </h5>
          <br />
          {/* {console.log(this.handlePick)}; */}
          <button onClick={() => this.handlePick()} className="btn btn-primary">
            View Detail
          </button>
        </div>
      </div>
    );
  }

  render() {
    //console.log(this.props.movie[0]);
    return (
      <div className="container">
        <div className="row" id="movies">
          {this.props.movie.map(this.renderMovies)}
        </div>
      </div>
    );
  }
}

// REDUX

function mapStateToProps({ movie }) {
  //console.log(movie);
  //console.log(typeof movie);
  return { movie };
}
// EXPORT

// export default AllVideos;

// REDUX EXPORT

export default connect(mapStateToProps)(VideoList);

import React from 'react';
import Modal from 'react-modal';

const VideoModal = (props) => (
    <Modal
        isOpen={!!props.movieSelected}
        contentLabel="Movie Detail"
    >
        <h3>Suspicio? Bene ... tunc ibimus? Quis uh ... CONEXUS locus his diebus? Quisque semper aliquid videtur, in volutpat mauris. Nolo enim dicere. Vobis neque ab aliis. Ego feci memetipsum explicans. Gus mortuus est. Lorem opus habeo. </h3>
    <button onClick={props.handleCloseDetail}>Close Detail</button>
    </Modal>
  );


export default VideoModal;