import React from "react";
import DishesCategory from "./DishesCategory";
import { useSelector } from "react-redux";

function extractCategories(dishes) {
  var categories = new Set();

  if (typeof dishes !== "undefined" && dishes.length > 0) {
    dishes.map((dish) => categories.add(dish.category));
    return Array.from(categories);
  }
}

function filterDishes(dishes, category) {
  var result = [];

  dishes.map((dish) => {
    if (dish.category === category) {
      result.push(dish);
    }
    return true;
  });
  return result;
}

export default function DishList(props) {
  const dishlist = useSelector((state) => state.dishes);
  const categoriesArray = extractCategories(dishlist);
  const categories = categoriesArray.map((category) => {
    return (
      <DishesCategory
        key={category}
        name={category}
        dishes={filterDishes(dishlist, category)}
      />
    );
  });

  return <div className="dishlist-container">{categories}</div>;
}