import { getBedwarsStar, getPrestigeName, getTextColor } from "@/lib/hypixel/bedwars"
import { getBWLevelForExp } from "@/lib/hypixel/bedwarsLevel"
import { bedwarsLevelColors } from "@/lib/hypixelFormatters"
import { cn } from "@/lib/utils"
import GenericProgress from "../../_components/GenericProgress"
import Multicolored from "../../_components/Multicolored"

export function BedwarsLevel({ xp }: { xp: number }) {
    const level = getBWLevelForExp(xp)
    const color = bedwarsLevelColors(level)
    const star = getBedwarsStar(level)
    const val = `[${level}${star}]`

    return <Multicolored val={val} color={color} />
}

export function BedwarsProgress({ level, percent }: { level: number, percent: number }) {
    return (
        <div className="flex items-center mb-10">
            <LevelNumber level={level} className="mr-2" />
            <Progress level={level} percent={percent} />
            <LevelNumber level={level + 1} className="ml-2" />
        </div>
    )
}

export function BedWarsPrestige({ level }: { level: number }) {
    if (level >= 1000 && level < 1100) {
        return (
            <span
                style={{
                    backgroundImage: "linear-gradient(to left,#a0a,#f5f,#5ff,#5f5,#ff5,#fa0,#f55)",
                    WebkitBackgroundClip: "text",
                    color: "transparent"
                }}
            >
                {`${getPrestigeName(level)} ${getBedwarsStar(level)}`}
            </span>
        )
    }

    return (
        <span className={`text-mc-${getTextColor(level)}`}>
            {`${getPrestigeName(level)} ${getBedwarsStar(level)}`}
        </span>
    )
}

function LevelNumber({ level, className }: { level: number, className?: string }) {
    if (level >= 1000 && level < 1100) {
        return (
            <div
                className={className}
                style={{
                    backgroundImage: "linear-gradient(to left,#a0a,#f5f,#5ff,#5f5,#ff5,#fa0,#f55)",
                    WebkitBackgroundClip: "text",
                    color: "transparent"
                }}
            >
                {level}
            </div>
        )
    }

    return <div className={cn(`text-mc-${getTextColor(level)}`, className)}>{level}</div>
}

function Progress({ level, percent }: { level: number, percent: number }) {
    if (level >= 1000 && level < 1100) {
        return <GenericProgress percent={percent} rainbow={true} />
    }

    return <GenericProgress percent={percent} className={`bg-mc-${getTextColor(level)}`} />
}