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

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

/**
 * Component that displays crate modes
 */
export function CrateMode({crate_index}) {
    // #!render_count
    const renderCount = useRenderCount();

    const modes_order = useShopStore((state) => state.modes_order);
    const crate_modes = useShopStore((state) => state.crate_modes);
    const crate = useShopStore((state) => state.crates[crate_index],
        (a, b) => a.id === b.id && a.crate_mode === b.crate_mode);
    const setMode = useShopStore((state) => state.setCrateMode);

    // #!render_count
    console.log("CrateMode renders: ", renderCount)
    if (modes_order.includes(crate.crate_mode)) {
        return (
            <div className="crate-mode">
                {modes_order.map((mode_name, _) => (
                    <a
                        key={mode_name}
                        className={(crate.crate_mode === mode_name ? 'active' : '')}
                        onClick={() => setMode(crate.id, mode_name)}
                        href="#"
                        role="button">{crate_modes[mode_name].name}</a>
                ))}
            </div>
        );
    } else {
        return <div className="crate-mode"></div>
    }
}