import {ProductItem} from "./ProductItem";
import React from "react";
import {useShopStore} from "./shop_store";

export function BacklogGroups() {
    const data = useShopStore((state) => state.groups);
    const items = useShopStore((state) => state.cards);

    const ordered_groups = data.categories.map(groupItem => ({
        name: groupItem.name,
        items: groupItem.itemIds.map(itemId => items[itemId])
    }));
    let item_index = -1;
    const groups = ordered_groups.map((group, g_index) => {
            return (
                <div className="accordion-item" key={`${group.name}`}>
                    <h2 className="accordion-header">
                        <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target={`#collapse${g_index}`} aria-expanded="true"
                                aria-controls={`collapse${g_index}`}>
                            {group.name}
                        </button>
                    </h2>
                    <div id={`collapse${g_index}`} className="accordion-collapse collapse" aria-labelledby="headingOne"
                         data-bs-parent="#accordion_categories">
                        <div className="accordion-body">
                            {group.items.map(item => {
                                item_index++;
                                return (
                                    <ProductItem card_index={item_index} key={item.id} />
                                )
                            })}
                        </div>
                    </div>
                </div>
            );
        }
    );
    return (
        <div className="accordion accordion-flush" id="accordion_categories">
            {groups}
        </div>
    )
}