import {formatMoney} from "./utils";
import {WarningIndicator} from "./CardWarnings";
import {SummaryPopup} from "./options/SummaryPopup";
import React from "react";
import {useShopStore} from "./shop_store";

// #!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 && a.options_data === b.options_data && a.show_warnings === b.show_warnings);

    // #!render_count
    console.log("SummaryCrateCard renders: ", renderCount)


    const options = card && card.options;
    const options_data = card && card.options_data;
    const warnings = card && card.show_warnings;

    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">
                                    <span style={{
                                        'display': 'inline-block',
                                        'width': '16px',
                                    }}>&nbsp;</span>
                <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"/>
                    </button>

                    <div style={{'width': '45px', 'height': '20px'}}
                         className="d-inline-flex align-content-center align-self-center justify-content-evenly">
                        {(warnings && warnings.length > 0 ? (
                            <WarningIndicator warnings={warnings}/>
                        ) : (
                            <span style={{
                                'display': 'inline-block',
                                'width': '20px',
                            }}>&nbsp;</span>
                        ))}
                        {((options && options_data) ? (
                            <SummaryPopup id={card.id + "options"} options={options}
                                          data={options_data}/>
                        ) : (
                            <span style={{
                                'display': 'inline-block',
                                'width': '20px',
                            }}>&nbsp;</span>
                        ))}
                    </div>
                </div>
            </td>
        </tr>);
}