import { Separator } from "@/components/ui/separator"
import { formatNumber } from "@/lib/formatters"
import { getAllDuelsDivisions, getDuelsMostPlayed } from "@/lib/hypixel/duels/duels"
import { devide, romanize } from "@/lib/hypixel/general"
import { NonNullStats } from "@/lib/schema/player"
import GeneralStats from "../GeneralStats"
import DuelsGeneralStats from "./stats"
import DuelsStatsTable from "./table"

export default function DuelsStats({ stats }: { stats: NonNullStats["Duels"] }) {
    if (!stats) return null

    const wl = formatNumber(devide(stats.wins, stats.losses))
    const kd = formatNumber(devide(stats.kills, stats.deaths))
    const div = getAllDuelsDivisions(stats)
    const mostPlayed = getDuelsMostPlayed(stats)

    return (
        <GeneralStats
            id="duels"
            title="Duels"
            collapsedStats={[
                {
                    title: <p>Division</p>,
                    stat: (
                        <p>
                            {div !== null ?
                                (
                                    <span className={`text-mc-${div.color}`}>
                                        {`${div.name} ${romanize(div.level)}`}
                                    </span>
                                ) :
                                <span className="text-muted-foreground">-</span>}
                        </p>
                    )
                },

                {
                    title: <p>Wins</p>,
                    stat: (
                        <p className="font-bold">
                            {mostPlayed !== null ?
                                (
                                    <span>
                                        {mostPlayed.name}
                                    </span>
                                ) :
                                <span className="text-muted-foreground">-</span>}
                        </p>
                    )
                },
                {
                    title: <p>Wins</p>,
                    stat: <p className="text-muted-foreground">{formatNumber(stats.wins)}</p>
                },
                {
                    title: <p>WL</p>,
                    stat: <p className="text-muted-foreground">{wl}</p>
                }
            ]}
        >
            <Separator className="my-4" />
            <DuelsGeneralStats stats={stats} div={div} kd={kd} wl={wl} />
            <Separator className="my-4" />
            <DuelsStatsTable stats={stats} />
        </GeneralStats>
    )
}
