import React from 'react'
import {Draggable} from "@hello-pangea/dnd";
import {productStyle} from "./utils";
import {useShopStore} from "./shop_store";
import {OptionsDialogWrapper} from "./OptionsWrapper";

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

/**
 * Component that renders a product.
 * Used in the crate
 */
export function  ProductCartItemHorizontal({card_index, crate_index}) {
    // #!render_count
    const renderCount = useRenderCount();

    const card = useShopStore((state) => state.crates[crate_index].h_items[card_index],
        (a, b) => a.id === b.id);

    const highlighted = useShopStore((state) =>
        !!state.highlighted.horizontal &&
        state.crates[crate_index].id === state.highlighted.crate &&
        card_index === state.highlighted.card
    );
    const use_options = useShopStore((state) => state.crateParams(state.crates[crate_index].crate_mode).options);
    const crate_id = useShopStore((state) => state.crates[crate_index].id);
    const setHighlight = useShopStore((state) => state.highlightCard);
    const removeHighlight = useShopStore((state) => state.highlightReset);
    const onCardRemove = useShopStore((state) => state.deleteCard);

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


    const options = use_options && card && card[use_options] && card[use_options].length > 0;

    return (
        <Draggable draggableId={card.id} index={card_index}>

            {(provided, snapshot) => (
                <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    style={{
                        ...productStyle(
                            provided.draggableProps.style,
                            snapshot,
                            true,
                            !!highlighted,
                            false,
                            true
                        )
                    }}
                    onMouseEnter={() => setHighlight(crate_id, card_index, true)}
                    onMouseLeave={removeHighlight}
                >

                    {/* warning container */}

                    <div className="progress-container warning d-flex justify-content-evenly">
                        {options && (
                            <OptionsDialogWrapper
                                crate_index={crate_index}
                                card_index={card_index}
                                horizontal={true}
                            />
                        )}
                    </div>

                    <div
                        className="product-name"
                        onMouseEnter={() => setHighlight(crate_id, card_index, true)}
                        onClick={() => setHighlight(crate_id, card_index, true)}
                    >

                        {`${card.name_number} ${card.name} ${card.name_codename}`}
                    </div>

                    {/* remove container */}
                    <div
                        style={{'display': 'flex'}}
                        className="removeHorizontal"
                        onClick={() => onCardRemove(crate_id, card_index, true)}>

                        <img src="/images/shop/icon-remove.svg" alt="rm"/>

                    </div>

                </div>
            )}

        </Draggable>
    );
}