ReactDOM.render((
<BrowserRouter>
    <App />
</BrowserRouter>),
document.getElementById('root'));
registerServiceWorker();

class App extends Component {
  render() {
    return (
        <Routes />
    )
  }
}

export const Routes = () => {
    return (
        <main>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/movies" component={Search} />
            </Switch>
        </main>
    );
}

render() {
        let filteredMovies = this.state.movies.filter((movie) => {
            return movie.title.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1;
        })

        return (
            <div>
                <p>Search Page</p>
                <form>
                    <input type="text" value={this.state.search} onChange={this.updateSearch}/>
                </form>
                <div>
                    {filteredMovies.map((movie, idx) =>
                        <div>
                            <div key={idx}>
                                <Link to={`/movies/${movie.videoId}`}>
                                    <img src={movie.image.high.url} height="160px" width="100px" alt=""/>
                                    <p>{movie.title}</p>
                                    <p>{movie.quality}</p>
                                </Link>
                            </div>
                        </div>
                    )}
                </div>
                <Switch>
                    <Route path="/movies/:id" component={Single} />
                </Switch>
            </div>
        )
    }

}

export default Search;

class Single extends Component {
    render() {
        return (
            <div>
                <p>Single Movie...</p>
                {this.props.match.params.id}
            </div>
        )
    }
}

export default withRouter(Single);