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 options_disabled = useShopStore((state) => !!state.crateParams(state.crates[crate_index].crate_mode).warnings_disabled); 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 = !options_disabled && card && card.options && card.options.length > 0; const warnings = !options_disabled && card_show_warnings && card_show_warnings.length > 0; const resources = !options_disabled && 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> ); }