import { useEffect, useState } from "react";
import { OverlayTrigger, Tooltip } from "react-bootstrap";
import { useSettings } from "../context/settings";
import { UmaCharacter, loadUmaCharacters } from "../utils/umaCharacters";
import "./EaterBadge.scss";

/**
 * Úrovně „jedlíka" podle počtu jídel: Special Week sní hodně, Oguri Cap ještě víc.
 * Seřazeno od nejvyšší úrovně.
 */
const LEVELS = [
    { minItems: 3, character: 'Oguri Cap', title: 'Úroveň Oguri Cap — bezedný žaludek' },
    { minItems: 2, character: 'Special Week', title: 'Úroveň Special Week — pořádný apetit' },
];

/** Úrovně ve stylu My Little Pony — místo portrétu cutie mark (emoji). Seřazeno od nejvyšší úrovně. */
const MLP_LEVELS = [
    { minItems: 3, emoji: '🧁', title: 'Úroveň Pinkie Pie — cupcaků není nikdy dost' },
    { minItems: 2, emoji: '🍎', title: 'Úroveň Applejack — poctivý apetit' },
];

/** Úrovně ve stylu Hell Girl — emoji v černém odznaku s rudým lemem. Seřazeno od nejvyšší úrovně. */
const HG_LEVELS = [
    { minItems: 3, emoji: '🔥', title: 'Úroveň Wanyūdō — hlad jako pekelný oheň' },
    { minItems: 2, emoji: '🥀', title: 'Úroveň Ai Enma — tichý, ale nenasytný apetit' },
];

type Props = {
    /** Počet jídel/položek, které si strávník vybral či objednal */
    items: number,
};

/** Odznak s postavou u strávníků s více jídly — jen ve stylech Umamusume, My Little Pony a Hell Girl. */
export default function EaterBadge({ items }: Readonly<Props>) {
    const styleTheme = useSettings()?.styleTheme;
    const isUma = styleTheme === 'umamusume';
    const [characters, setCharacters] = useState<UmaCharacter[]>([]);

    useEffect(() => {
        if (isUma) loadUmaCharacters().then(setCharacters);
    }, [isUma]);

    if (styleTheme === 'mlp' || styleTheme === 'hellgirl') {
        const emojiLevel = (styleTheme === 'mlp' ? MLP_LEVELS : HG_LEVELS).find(l => items >= l.minItems);
        if (!emojiLevel) return null;
        return (
            <OverlayTrigger placement="top" overlay={<Tooltip>{emojiLevel.title} ({items} jídla)</Tooltip>}>
                <span className={`eater-badge eater-badge-${styleTheme}`} role="img" aria-label={emojiLevel.title}>{emojiLevel.emoji}</span>
            </OverlayTrigger>
        );
    }

    const level = LEVELS.find(l => items >= l.minItems);
    const character = level && characters.find(c => c.name === level.character);
    // Malý odznak potřebuje obličej — portrét (icon), případně kulatý obrázek postavy
    const src = character?.icon ?? (character?.round ? character.images[0] : undefined);
    if (!isUma || !level || !src) return null;

    return (
        <OverlayTrigger placement="top" overlay={<Tooltip>{level.title} ({items} jídla)</Tooltip>}>
            <img src={src} alt={level.character} className="eater-badge" />
        </OverlayTrigger>
    );
}