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 warnings_disabled = useShopStore((state) => !!state.crateParams(state.crates[crate_index].crate_mode).warnings_disabled); 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; const warnings = !warnings_disabled && card_show_warnings && card_show_warnings.length > 0; const resources = !warnings_disabled && card_counted_resources && card_counted_resources.length > 0; return ( {(provided, snapshot) => (
setHighlight(crate_id, card_index)} onMouseLeave={removeHighlight} > {/* warning container */}
{warnings && () } {options && ( )}
{card.name_number}
setHighlight(crate_id, card_index)} onClick={() => setHighlight(crate_id, card_index)} >
{/* remove container */}
onCardRemove(crate_id, card_index)}> rm

Remove

{/* progression container */} {resources && ( )}
)}
); }