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

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

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

    const currency = useShopStore((state) => state.currency);
    const crate_id = useShopStore((state) => state.crates[crate_index].id);
    const optionsPrices = useShopStore((state) => state.crate_prices);
    const updateOptions = useShopStore((state) => state.updateCrateOptions);
    const options_data = useShopStore((state) => state.crates[crate_index].options_data || {});

    const options = ProcessOptionsToData({options: optionsPrices, data: options_data});

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

    return options.map((option, _i) => (
        <tr key={"summary_crate_" + crate_id +"option_" + option.id}>
            <td className="item-card-name">
                    <span style={{
                        'display': 'inline-block', 'width': '16px',
                    }}>&nbsp;</span>
                <div>{option.title}</div>
            </td>

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

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

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