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

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


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

    const currency = useShopStore((state) => state.currency);
    const fanTray = useShopStore((state) => state.fanTray);
    const crate_id = useShopStore((state) => state.crates[crate_index].id);
    const fanTrayAvailable = useShopStore((state) => state.fanTrayAvailableByIndex(crate_index));
    const fanTrayEnabled = useShopStore((state) => state.crates[crate_index].fan_tray);
    const updateFanTray = useShopStore((state) => state.updateFanTrayOption);


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

    return (fanTrayAvailable && fanTrayEnabled) ? (<tr
        key={"summary_crate_" + crate_id + "_fan_tray"}>
        <td className="item-card-name">
                <span style={{
                    'display': 'inline-block', 'width': '16px',
                }}>&nbsp;</span>
            <div>{fanTray.optionTitle}</div>
        </td>

        <td className="price">
            <div className="d-inline-flex align-content-center">
                {`${currency} ${formatMoney(fanTray.price)}`}

                <button onClick={() => updateFanTray(crate_id, false)}>
                    <img src="/images/shop/icon-remove.svg" className="d-block"/>
                </button>

                <div style={{'width': '45px', 'height': '20px'}} className="d-inline"></div>
            </div>
        </td>
    </tr>) : null;
}