import React from "react";
import {LevelUI} from "./warnings";
import {useShopStore} from "./shop_store";
// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";

const compareArrays = (a, b) =>
    a.length === b.length &&
    a.every((element, index) => element.id === b[index].id);

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

    const crate_warnings = useShopStore(state => (state.crates[crate_index].warnings), compareArrays)

    // #!render_count
    console.log("CrateWarnings renders: ", renderCount)
    // TODO UI/colors
    return (
        <div className="crate-info">
            {crate_warnings.map((rule, index) => (
                <p key={index} className="rule" style={{'color': LevelUI(rule.level).color}}>
                    <img src={LevelUI(rule.level).icon} /> <i>{rule.message}</i>
                </p>
            ))}
        </div>
    )
}