import "./styles.css";

import React, { Component, Fragment } from "react";
import { inject, observer } from "mobx-react";
import { Button } from "reactstrap";
import Movie from "../Movie";
import Store from "./store";

@inject(stores => ({
  moviesStore: stores.moviesStore,
  watchListStore: stores.watchListStore
}))
@observer
export default class MoviesIndex extends Component {
  constructor(props) {
    super(props);

    this.store = Store.create(null, this);
  }

  render() {
    if (this.store.paginationStore.isLoading) {
      return <div>loading...</div>;
    }

    const { previousPage, nextPage } = this.store.paginationStore;

    return (
      <div>
        <div className="movie-list">
          {this.store.movies.map(movie => {
            const {
              id,
              isOnWatchList,
              removeFromWatchList,
              addToWatchList
            } = movie;

            return (
              <Movie key={id} {...movie}>
                {isOnWatchList ? (
                  <Button onClick={removeFromWatchList}>
                    Remove from Watch List
                  </Button>
                ) : (
                  <Button onClick={addToWatchList}>Add to Watch List</Button>
                )}
              </Movie>
            );
          })}
        </div>
        <div className="movie-index-buttons">
          <Button onClick={previousPage}>Previous Page</Button>
          <Button onClick={nextPage}>Next Page</Button>
        </div>
      </div>
    );
  }
}