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

/**
 * Component that renders the catalog in the aside
 */
export function Catalog() {
    // #!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);
    const showSearch = useShopStore((state) => state.listed_cards.length > 0 && state.search_bar_value.length > 0);
    const noResults = useShopStore((state) => state.listed_cards.length === 0 && state.search_bar_value.length > 0);

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

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

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

                    <div className="catalog-bar">
                        <SearchBar/>

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

                    {(showSearch && <CatalogSearchResult/>) ||
                        (noResults && <p className="no-results">No results</p>) ||
                        <CatalogGroups/>}

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

                    <GradientBottom/>
                </div>
            )}

        </Droppable>
    );

}