import { formatNumber } from "@/lib/formatters"
import { bedwarsLevelColors, getBedwarsStar, getPrestigeName, getTextColor } from "@/lib/hypixel/bedwars/bedwars"
import { getBWLevelForExp } from "@/lib/hypixel/bedwars/level"
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, currentXp, ceilingXp }: { level: number, percent: number, currentXp: number, ceilingXp: number }) {
    return (
        <div className="flex items-center mb-10">
            <LevelNumber level={level} className="mr-2" />
            <Progress
                level={level}
                percent={percent}
                tooltipId="bedwars-progress"
                tooltipContent={`${formatNumber(currentXp)}/${formatNumber(ceilingXp)} XP`}
            />
            <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 (
            <p
                className={className}
                style={{
                    backgroundImage: "linear-gradient(to left,#a0a,#f5f,#5ff,#5f5,#ff5,#fa0,#f55)",
                    WebkitBackgroundClip: "text",
                    color: "transparent"
                }}
            >
                {level}
            </p>
        )
    }

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

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

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