web2019/static/js/shop/ProductCartItem.jsx

import React from 'react'
import {Draggable} from "@hello-pangea/dnd";
import {compareObjectsEmptiness, productStyle} from "./utils";
import {Resources} from "./Resources";
import {CardWarnings} from "./CardWarnings";
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 ProductCartItem({card_index, crate_index, first, last}) {
    // #!render_count
    const renderCount = useRenderCount();


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

    const card_show_warnings = useShopStore(state => state.crates[crate_index].items[card_index].show_warnings, compareObjectsEmptiness);
    const card_counted_resources = useShopStore(state => state.crates[crate_index].items[card_index].counted_resources, compareObjectsEmptiness);

    const highlighted = useShopStore((state) => state.crates[crate_index].id === state.highlighted.crate && card_index === state.highlighted.card);
    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 = card && card.options && card.options.length > 0;
    const warnings = card_show_warnings && card_show_warnings.length > 0;
    const resources = card_counted_resources && card_counted_resources.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)}
                    onMouseLeave={removeHighlight}
                >

                    {/* warning container */}

                    <div className="progress-container warning d-flex justify-content-evenly">
                        {warnings &&
                            (<CardWarnings crate_index={crate_index} card_index={card_index} />)
                        }

                        {options && (
                            <OptionsDialogWrapper
                                crate_index={crate_index}
                                card_index={card_index}
                                first={first}
                                last={last}
                            />
                        )}
                    </div>

                    <h6>{card.name_number}</h6>

                    <div
                        onMouseEnter={() => setHighlight(crate_id, card_index)}
                        onClick={() => setHighlight(crate_id, card_index)}
                    >

                        <img
                            className='item-cart'
                            src={card.image}/>
                    </div>

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

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

                        <p>Remove</p>
                    </div>

                    {/* progression container */}
                    {resources && (
                        <Resources crate_index={crate_index} card_index={card_index} />
                    )}


                </div>
            )}

        </Draggable>
    );
}