import React, { useCallback } from "react";
import pick from "lodash/pick";

import Chip from "components/Chip";
import Dropdown from "components/Dropdown";
import { PostStore } from "stores";
import { updateWindowPosts } from "utils";

const PostFilters = () => {
  const { window, filters } = PostStore.useState((state) =>
    pick(state, ["window", "filters", "items"])
  );

  const flagsOptions = [
    { title: "Vše", value: "all" },
    { title: "Jen aktivní", value: "active" },
    { title: "Jen archivované", value: "archived" },
  ];
  const sortOptions = [
    { title: "Podle času", value: "byDate" },
    { title: "Podle podpory", value: "byScore" },
  ];
  const typeOptions = [
    { title: "Návrhy i příspěvky", value: "all" },
    { title: "Jen návrhy", value: "proposalsOnly" },
    { title: "Jen příspěvky", value: "discussionOnly" },
  ];
  const hasNextPage = window.page * window.perPage < window.itemCount;
  const hasPrevPage = window.page > 1;

  const setFilter = (prop, newValue, resetPage = true) => {
    PostStore.update((state) => {
      state.filters[prop] = newValue;
      state.window.itemCount = state.window.items.length;

      updateWindowPosts(state);

      if (resetPage) {
        state.window.page = 1;
      }
    });
  };

  const onFlagsChange = (newValue) => setFilter("flags", newValue);
  const onSortChange = (newValue) => setFilter("sort", newValue, false);
  const onTypeChange = (newValue) => setFilter("type", newValue);

  const onNextPage = useCallback(() => {
    if (hasNextPage) {
      PostStore.update((state) => {
        state.window.page = state.window.page + 1;
      });
    }
  }, [hasNextPage]);
  const onPrevPage = useCallback(() => {
    if (hasPrevPage) {
      PostStore.update((state) => {
        state.window.page = state.window.page - 1;
      });
    }
  }, [hasPrevPage]);

  const enabledPaginatorClass = "cursor-pointer text-xs";
  const disabledPaginatorClass = "opacity-25 cursor-not-allowed text-xs";

  return (
    <div className="flex flex-col space-y-2 xl:space-y-0 xl:space-x-8 xl:flex-row xl:items-center">
      <div className="-mx-1">
        <Dropdown
          value={filters.flags}
          onChange={onFlagsChange}
          options={flagsOptions}
          className="text-xs ml-1 mt-2 xl:mt-0"
        />
        <Dropdown
          value={filters.sort}
          onChange={onSortChange}
          options={sortOptions}
          className="text-xs ml-1 mt-2 xl:mt-0"
        />
        <Dropdown
          value={filters.type}
          onChange={onTypeChange}
          options={typeOptions}
          className="text-xs ml-1 mt-2 xl:mt-0"
        />
      </div>

      <div>
        <Chip
          color="grey-125"
          className={
            hasPrevPage ? enabledPaginatorClass : disabledPaginatorClass
          }
          hoveractive
          onClick={onPrevPage}
        >
          <span className="ico--chevron-left"></span>
        </Chip>
        <Chip
          color="grey-125"
          className={
            hasNextPage ? enabledPaginatorClass : disabledPaginatorClass
          }
          hoveractive
          onClick={onNextPage}
        >
          <span className="ico--chevron-right"></span>
        </Chip>
      </div>
    </div>
  );
};

export default PostFilters;