import * as React from "react";
import { IProductCategoryItem } from "../../../../apiModels/ViewModels";
import ProductCategoryDropdownItem from "./ProductCategoryDropdownItem";

type CategoryDropDownMenuProps = {
	activeFilterExpression: string,
	categories: IProductCategoryItem[],
	level: number,
	onFilterExpressionChange(categoryId: number): void,
	parentId: number
};

export default function ProductCategoryDropdown({ activeFilterExpression, categories, level, onFilterExpressionChange, parentId }: CategoryDropDownMenuProps) {
	const topLvlCategories = categories
		.filter(i => i.parentID === parentId)
		.sort((a, b) => (a.name > b.name ? 1 : -1));

	if (!topLvlCategories.length) return null;
	return (
		<React.Fragment>
			{topLvlCategories.map((category: IProductCategoryItem) => {
				return <ProductCategoryDropdownItem key={`categoryDropdownItem-${category.id}`}
					activeFilterExpression={activeFilterExpression}
					categories={categories}
					category={category}
					level={level}
					onFilterExpressionChange={onFilterExpressionChange}
					parentId={parentId} />
			})}
		</React.Fragment>
	);
}