import React from 'react'
import {Droppable} from "@hello-pangea/dnd";
import {cartStyle} from "./utils";
import {ProductCartItem} from "./ProductCartItem.jsx";
import {FakePlaceholder} from "./FakePlaceholder.jsx";
import {FillExtData} from "./options/utils";
import {crate_type_to_hp, hp_to_slots, resource_counters} from "./count_resources";

/**
 * Component that displays a list of <ProductCartItem>
 */
export function Cart({isMobile, isTouch, data, onToggleOverlayRemove, onClickRemoveItem, onCardUpdate, onClickItem}) {
    const nbrOccupied = hp_to_slots(resource_counters.hp(data.items, -1));
    const nbrSlots = hp_to_slots(crate_type_to_hp(data.crate_type));
    console.log(nbrOccupied, nbrSlots);

    const products = data.items.map((item, index) => {
        let itemData;
        let ext_data = FillExtData(data.items, index);
        if (data.items && index in data.items) {
            itemData = data.items[index];
        }
        return (
            <ProductCartItem
                isMobile={isMobile}
                isTouch={isTouch}
                hovered={item.hovered}
                key={item.id}
                id={item.id}
                index={index}
                first={index === 0}
                last={index === data.items.length - 1 && nbrOccupied >= nbrSlots}
                data={itemData}
                ext_data={ext_data}
                onToggleOverlayRemove={onToggleOverlayRemove}
                onClickRemoveItem={onClickRemoveItem}
                onCardUpdate={onCardUpdate}
                onClickItem={onClickItem}
                model={item}>
            </ProductCartItem>
        );
    });

    return (
        <Droppable droppableId={data.id} direction="horizontal">

            {(provided, snapshot) => (
                <div
                    ref={provided.innerRef}
                    {...provided.droppableProps}
                    style={cartStyle(
                        provided.droppableProps.style,
                        snapshot,
                    )}
                    className="items-cart-list">

                    {products}

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

                    <FakePlaceholder
                        nToDraw={nbrSlots - nbrOccupied}
                        isDraggingOver={snapshot.isDraggingOver}/>
                </div>
            )}

        </Droppable>
    );
}