import {formatMoney} from "./utils";
import React from "react";
import {useShopStore} from "./shop_store";

// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";

export function SummaryCrateHeader({crate_index}) {
    // #!render_count
    const renderCount = useRenderCount();

    const currency = useShopStore((state) => state.currency);
    const crateParams = useShopStore((state) => state.crateParams);
    const clearCrate = useShopStore((state) => state.clearCrate);
    const delCrate = useShopStore((state) => state.delCrate);

    const crate_mode = useShopStore((state) => state.crates[crate_index].crate_mode);
    const crate_id = useShopStore((state) => state.crates[crate_index].id);
    const crate_name = useShopStore((state) => state.crates[crate_index].name);
    const modes_order = useShopStore((state) => state.modes_order);
    const crate_mode_displayed = modes_order.includes(crate_mode);


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

    let crate_type = crateParams(crate_mode);

    return (
        <tr key={"summary_crate_" + crate_id}>
            <td className="item-card-name">{!!crate_name ? crate_name :  crate_type.name + " #" + crate_index}</td>
            <td className="price">
                <div className="d-inline-flex">

                    {crate_mode_displayed && `${currency} ${formatMoney(crate_type.price)}`}

                    <button onClick={() => clearCrate(crate_id)}>
                        <img src="/images/shop/icon-clear.svg" alt="empty crate"/>
                    </button>

                    {
                        crate_mode_displayed ? (
                            <button onClick={() => delCrate(crate_id)}>
                                <img src="/images/shop/icon-remove.svg" alt="remove crate"/>
                            </button>
                        ) : <span className="span-with-margin"></span>
                    }

                </div>
            </td>
        </tr>
    )
}