import {OverlayTrigger} from "react-bootstrap";
import React from "react";
import {Levels, MaxLevel} from "./warnings";
import {useShopStore} from "./shop_store";
import {compareArraysLevelOne} from "./utils";


export function CardWarnings({crate_index, card_index}) {

    const warnings = useShopStore(state => state.crates[crate_index].items[card_index].show_warnings, compareArraysLevelOne);

    const max_level = MaxLevel(warnings);
    return (
        <OverlayTrigger
            placement="bottom"
            trigger={['click', 'hover', 'focus']}
            overlay={
                ({arrowProps, hasDoneInitialMeasure, show, style, ...props}) => (
                    <div className="k-popup-warning" style={{...style, backgroundColor: max_level.color}} {...props}>
                        {warnings.map((warning, _i) => {
                            return (
                                <p className="rule warning" key={`warnmsg_${card_index}_${warning.name}`}>
                                    <i>{warning.message}</i>
                                </p>
                            )
                        })}
                    </div>)
            }
            rootClose
        >
            <img className="alert-warning p-0" src={max_level.icon}/>
        </OverlayTrigger>
    )
}

export function WarningIndicator({crate_index, card_index}) {
    const warnings = useShopStore(state => state.crates[crate_index].items[card_index].show_warnings, compareArraysLevelOne);

    const max_level = MaxLevel(warnings);
    return max_level.priority === Levels.warning.priority ? (
        <img
            className="alert-warning align-self-start d-block"
            src={max_level.icon}
        />
    ) : (<span className="alert-warning align-self-start d-block"></span>);
}