"use client"

import { getHeads } from "@/lib/hypixel/skywars/skywars"
import { cn } from "@/lib/utils"
import Image from "next/image"
import Link from "next/link"
import { useEffect, useState } from "react"
import { Tooltip } from "react-tooltip"

export function PresigeousHeads({ heads }: { heads: { username: string, timestamp: number, sacrifice: string }[] }) {
    const [pos, setPos] = useState({ x: 0, y: 0 })

    useEffect(() => {
        const controller = new AbortController()

        window.addEventListener("mousemove", (e) => {
            if (!(e.target instanceof HTMLImageElement)) return
            if (e.target.dataset.id !== "presigeous-heads") return

            setPos({ x: e.clientX, y: e.clientY - 10 })
        }, { signal: controller.signal })

        return () => {
            controller.abort()
        }
    })

    return (
        <div className="flex flex-wrap gap-2">
            {heads.map(({ username, sacrifice }, index) => {
                const text = sacrifice.at(0) + sacrifice.split("").slice(1, sacrifice.length).join("").toLowerCase()

                return (
                    <Link href={`/player/${username}`} key={index}>
                        <Image
                            data-id="presigeous-heads"
                            data-tooltip-id="presigeous-heads"
                            data-tooltip-content={text}
                            src={`https://minotar.net/helm/${username}/24.png`}
                            width={24}
                            height={24}
                            alt={username}
                        />
                    </Link>
                )
            })}
            <Tooltip id="presigeous-heads" position={pos} />
        </div>
    )
}

export function HeadsBar({ heads, heads_total }: { heads: [string, number][], heads_total: number }) {
    const [pos, setPos] = useState({ x: 0, y: 0 })

    useEffect(() => {
        const controller = new AbortController()

        window.addEventListener("mousemove", (e) => {
            if (!(e.target instanceof HTMLDivElement)) return
            if (e.target.dataset.id !== "heads-bar") return

            setPos({ x: e.clientX, y: e.clientY - 10 })
        }, { signal: controller.signal })

        return () => {
            controller.abort()
        }
    })

    return (
        <>
            <div className="flex mt-2 mb-4">
                {heads.map(([key, total], index) => {
                    const head = getHeads(key)
                    const percent = heads_total === 0 ? 0 : total / heads_total

                    return (
                        <div
                            data-id="heads-bar"
                            data-tooltip-id="heads-bar"
                            data-tooltip-content={`${total} ${head === null ? "Undefined" : head.name} heads`}
                            key={key}
                            className={cn(
                                "h-5",
                                head === null ? "bg-background" : `bg-mc-${head.color}`,
                                index === 0 ? "rounded-l-md" : undefined,
                                index === heads.length - 1 ? "rounded-r-md" : undefined
                            )}
                            style={{
                                width: `${percent * 100}%`
                            }}
                        >
                        </div>
                    )
                })}
            </div>
            <Tooltip id="heads-bar" position={pos} />
        </>
    )
}