import React from 'react';
import {Droppable} from "@hello-pangea/dnd";
import {useShopStore} from "./shop_store";
// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";
import {BacklogGroups} from "./BacklogGroups";
import {SearchBar} from "./SearchBar";
import {BacklogSearchResult} from "./BacklogSearchResult";

/**
 * Component that renders the backlog in the aside
 */
export function Backlog() {
    // #!render_count
    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);

    // #!render_count
    console.log("Backlog renders: ", renderCount)

    return (
        <Droppable
            droppableId={data.id}
            isDropDisabled={false}>

            {(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}

                    <SearchBar/>

                    <BacklogSearchResult/>

                    <BacklogGroups/>

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

        </Droppable>
    );

}