import React from "react";
import pick from "lodash/pick";

import { dislike, like } from "actions/posts";
import PostList from "components/posts/PostList";
import { PostStore } from "stores";

const PostsContainer = ({ className }) => {
  const { window, items } = PostStore.useState((state) =>
    pick(state, ["window", "items"])
  );
  const showingArchivedOnly = PostStore.useState(
    (state) => state.filters.flags === "archived"
  );

  // const onLike = (post) => like.run();
  // const onDislike = (post) => console.log("dislike", post);

  const sliceStart = (window.page - 1) * window.perPage;
  const sliceEnd = window.page * window.perPage;

  return (
    <PostList
      items={window.items
        .slice(sliceStart, sliceEnd)
        .map((postId) => items[postId])}
      onLike={like.run}
      onDislike={dislike.run}
      className={className}
      dimArchived={!showingArchivedOnly}
    />
  );
};

export default PostsContainer;