import React from 'react'
import {Droppable} from "@hello-pangea/dnd";
import {cartStyle, compareArraysWithIds} from "./utils";
import {ProductCartItemHorizontal} from "./ProductCartItemHorizontal";
import {HORIZONTAL_CART_MARKER, useShopStore} from "./shop_store";

// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";


/**
 * Component that displays a list of <ProductCartItem>
 */
export function CartHorizontal({crate_index}) {
    // #!render_count
    const renderCount = useRenderCount();

    const crate = useShopStore((state) => state.crates[crate_index], (a, b) => {
        return compareArraysWithIds(a.h_items, b.h_items)
    });

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


    const products = crate.h_items.map((item, index) => {
        return (
            <ProductCartItemHorizontal
                card_index={index}
                crate_index={crate_index}
                key={item.id}/>
        );
    });

    return (
        <Droppable droppableId={crate.id+HORIZONTAL_CART_MARKER} direction="vertical">
            {(provided, snapshot) => (
                <div
                    ref={provided.innerRef}
                    {...provided.droppableProps}
                    style={cartStyle(
                        provided.droppableProps.style,
                        snapshot,
                    )}
                    className="items-cart-list horizontal">

                    {products}

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

        </Droppable>
    );
}