import {compareObjectsEmptiness, formatMoney} from "./utils"; import {WarningIndicator} from "./CardWarnings"; import React from "react"; import {useShopStore} from "./shop_store"; import {OptionsSummaryWrapper} from "./OptionsWrapper"; // #!render_count import {useRenderCount} from "@uidotdev/usehooks"; export function SummaryCrateCard({crate_index, card_index}) { // #!render_count const renderCount = useRenderCount(); const currency = useShopStore((state) => state.currency); const deleteCard = useShopStore((state) => state.deleteCard); const setHighlight = useShopStore((state) => state.highlightCard); const resetHighlight = useShopStore((state) => state.highlightReset); 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 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_options_data = useShopStore(state => state.crates[crate_index].items[card_index].options_data, compareObjectsEmptiness); const options_disabled = useShopStore((state) => !!state.crateParams(state.crates[crate_index].crate_mode).warnings_disabled); // #!render_count console.log("SummaryCrateCard renders: ", renderCount) const options = !options_disabled && card && card.options && card.options.length > 0; const options_data = !options_disabled && card_options_data && Object.keys(card_options_data).length > 0; const warnings = !options_disabled && card_show_warnings && card_show_warnings.length > 0; return ( <tr key={"summary_crate_" + crate_id + "_" + card_index} className={`hoverable ${highlighted ? 'selected' : ''}`} onClick={() => setHighlight(crate_id, card_index)} onMouseEnter={() => setHighlight(crate_id, card_index)} onMouseLeave={() => resetHighlight()}> <td className="item-card-name tabbed"> <div>{`${card.name_number} ${card.name} ${card.name_codename}`}</div> </td> <td className="price"> <div className="d-inline-flex align-content-center"> {`${currency} ${formatMoney(card.price)}`} <button onClick={() => deleteCard(crate_id, card_index)}> <img src="/images/shop/icon-remove.svg" className="d-block"/> </button> <div style={{'width': '45px', 'height': '20px'}} className="d-inline-flex align-content-center align-self-center justify-content-evenly"> {(warnings ? ( <WarningIndicator crate_index={crate_index} card_index={card_index}/> ) : ( <span style={{ 'display': 'inline-block', 'minWidth': '20px', }}> </span> ))} {((options && options_data) ? ( <OptionsSummaryWrapper crate_index={crate_index} card_index={card_index}/> ) : ( <span style={{ 'display': 'inline-block', 'width': '20px', }}> </span> ))} </div> </div> </td> </tr>); }