import React from 'react';
import {useShopStore} from "./shop_store";
import {useRenderCount} from "@uidotdev/usehooks";

/**
 * Component that displays crate modes
 */
export function CrateMode({crate_index}) {
    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);

    console.log("CrateMode renders: ", renderCount)
    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>
    );
}