import React, {PureComponent} from 'react'
import PropTypes from "prop-types";
import {Droppable} from "@hello-pangea/dnd";
import {cartStyle, nbrOccupiedSlotsInCrate} from "./utils";
import {ProductCartItem} from "./ProductCartItem.jsx";
import {FakePlaceholder} from "./FakePlaceholder.jsx";
import {FillExtData} from "./options/utils";

/**
 * Component that displays a list of <ProductCartItem>
 */
export class Cart extends PureComponent {

    static get propTypes() {
        return {
            isMobile: PropTypes.bool,
            isTouch: PropTypes.bool,
            nbrSlots: PropTypes.number,
            itemHovered: PropTypes.string,
            data: PropTypes.object.isRequired,
            onToggleOverlayRemove: PropTypes.func,
            onClickRemoveItem: PropTypes.func,
            onCardUpdate: PropTypes.func,
            onClickItem: PropTypes.func,
        };
    }

    render() {
        const {
            isMobile,
            isTouch,
            nbrSlots,
            itemHovered,
            data,
            onToggleOverlayRemove,
            onClickRemoveItem,
            onClickItem,
            onCardUpdate,
        } = this.props;

        const nbrOccupied = nbrOccupiedSlotsInCrate(data.items);

        const products = data.items.map((item, index) => {
            let itemData;
            let ext_data = FillExtData(data.itemsData, index);
            if (data.itemsData && index in data.itemsData) {
                itemData = data.itemsData[index];
            }
            return (
                <ProductCartItem
                    isMobile={isMobile}
                    isTouch={isTouch}
                    hovered={item.id === itemHovered}
                    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
                            nbrSlots={nbrSlots}
                            items={data.items}
                            isDraggingOver={snapshot.isDraggingOver} />
                    </div>
                )}

            </Droppable>
        );
    }
}