import React from 'react';
import {Droppable} from "@hello-pangea/dnd";
import {ProductItem} from "./ProductItem";
import {useShopStore} from "./shop_store";
import {useRenderCount} from "@uidotdev/usehooks";

/**
 * Component that renders the backlog in the aside
 */
export function Backlog() {
    const renderCount = useRenderCount();
    const data = useShopStore((state) => state.groups);
    const items = useShopStore((state) => state.cards);
    const onClickToggleMobileSideMenu = useShopStore((state) => state.switchSideMenu);
    const isMobile = useShopStore((state) => state.isMobile);


    console.log("Backlog renders: ", renderCount)
    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 (
        <Droppable
            droppableId={data.id}
            isDropDisabled={true}>

            {(provided) => (
                <div
                    className="backlog-container"
                    ref={provided.innerRef}
                    {...provided.droppableProps}>

                    {isMobile ? (
                        <div className="mobileCloseMenu">
                            <button onClick={onClickToggleMobileSideMenu}>
                                <img src="/images/shop/icon-close-white.svg" alt="add"/>
                            </button>
                        </div>
                    ) : null}

                    <div className="accordion accordion-flush" id="accordion_categories">
                        {groups}
                    </div>

                    {provided.placeholder && (
                        <div style={{display: 'none'}}>
                            {provided.placeholder}
                        </div>
                    )}
                </div>
            )}

        </Droppable>
    );

}