import React from 'react' import {Draggable} from "@hello-pangea/dnd"; import {DialogPopup} from "./options/DialogPopup"; import {productStyle} from "./utils"; import {Resources} from "./Resources"; import {CardWarnings} from "./CardWarnings"; import {useShopStore} from "./shop_store"; import {useRenderCount} from "@uidotdev/usehooks"; /** * Component that renders a product. * Used in the crate */ export function ProductCartItem({card_index, crate_index, ext_data, first, last}) { const renderCount = useRenderCount(); const card = useShopStore((state) => state.crates[crate_index].items[card_index], (a, b) => a.id === b.id && a.show_warnings === b.show_warnings && a.counted_resources === b.counted_resources ); 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 onCardUpdate = useShopStore((state) => state.updateOptions); const onCardRemove = useShopStore((state) => state.deleteCard); console.log("ProductCartItem renders: ", renderCount) let options, options_data; const warnings = card && card.show_warnings; const resources = card && card.counted_resources; if (card && card.options) { options = card.options; if (!card.options_data) card.options_data = {}; options_data = card.options_data; options_data.ext_data = ext_data; } return ( {(provided, snapshot) => (
setHighlight(crate_id, card_index)} onMouseLeave={removeHighlight} > {/* warning container */}
{warnings && warnings.length > 0 && () } {options && ( { // console.log("construct", outvar, value, options_data); options_data[outvar] = value; }), update: ((outvar, value) => { // console.log("update", outvar, value, options_data); if (outvar in options_data) options_data[outvar] = value; onCardUpdate(crate_id, card_index, {[outvar]: value}); }) }} /> )}
{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 && ( )}
)}
); }