import Image from "next/image"
import { getLegendById } from "helper"
import styles from "styles/WeaponGridItem.module.css"
import type { LegendStats } from "helper/types";
// function getFraction(decimal:number) {
//     for(var denominator = 1; (decimal * denominator) % 1 !== 0; denominator++);
//     return {numerator: decimal * denominator, denominator: denominator};
// }
const LegendGlobalStatsItem = ({
    id = 0,
    games = 0,
    playrate = 0,
    winrate = 0,
    suicides = 0,
    damagedealt = 0,
    damagedealt_weaponone = 0,
    damagedealt_weapontwo = 0,
    damagedealt_unarmed = 0,
    damagedealt_gadgets = 0,
    damagetaken = 0,
    matchtime = 0,
    matchtime_weaponone = 0,
    matchtime_weapontwo = 0,
    matchtime_unarmed = 0,
    totalGames = 0,
    falls = 0,
    kos = 0,
    koweaponone = 0,
    koweapontwo = 0,
    kounarmed = 0,
    kogadgets = 0,
    kothrownitem = 0,
    index = 0
}: props) => {
    let legend = getLegendById(id)
    let avg_games_suicides = ((games / (suicides * games) || 0).toFixed(1)) 
    let fr = (Math.floor(((totalGames / games)) || 0).toLocaleString()) 
    return (
        <div className={styles.parent}>
            <div className={styles.imageContainer}>
                <div className={styles.image}>
                    <Image
                    loading={index >= 5 ? "eager" : "lazy"}
                        width={76.5}
                        height={76.5}
                        src={`/assets/legends/${id}.png`}
                        alt={legend?.bio_name} />
                </div>
            </div>
            <div className={styles.content}>
                <h1>{legend?.bio_name}</h1>
                <div>
                    <span className="tooltip" data-tip={!!playrate ? `1 out of every ${fr} players plays ${legend?.bio_name}` : "No one plays this legend"}>
                        Playrate: <span className={styles.weapon_value}>{playrate}%</span> <br />
                    </span>
                    <br />
                    Winrate: <span className={styles.weapon_value}>{winrate}%</span><br />
                    <span data-tooltip-ml="small" className="tooltip" data-tip={`On average, every ${avg_games_suicides} games, at least 1 suicide happens`}>
                        Suicides: <span className={styles.weapon_value}>{(suicides * 100).toFixed(2)}%</span><br />
                    </span>
                    <br/>
                        Avg. Falls/Death: <span className={styles.weapon_value}>{falls}</span><br />
                        <span className="tooltip" data-tip={`${legend?.weapon_one}: ${(((koweaponone / kos) * 100) || 0).toFixed(2)}%\n${legend?.weapon_two}: ${(((koweapontwo / kos) * 100) || 0).toFixed(2)}%\nUnarmed: ${(((kounarmed / kos) * 100) || 0).toFixed(2)}%\nThrown items: ${((((kothrownitem + kogadgets) / kos) * 100) || 0).toFixed(2)}%`}>
                        Avg. KOs: <span className={styles.weapon_value}>{kos}</span>
                    </span>
                    <br/>
                    <span className="tooltip" data-tip={`${legend?.weapon_one}: ${(((damagedealt_weaponone / damagedealt) * 100) || 0).toFixed(2)}%\n${legend?.weapon_two}: ${(((damagedealt_weapontwo / damagedealt) * 100) || 0).toFixed(2)}%\nUnarmed: ${(((damagedealt_unarmed / damagedealt) * 100) || 0).toFixed(2)}%\nGadgets: ${(((damagedealt_gadgets / damagedealt) * 100) || 0).toFixed(2)}%`}>
                    Avg. Damage dealt: <span className={styles.weapon_value}>{damagedealt}</span>
                    </span>
                    <br />
                    Avg. Damage Taken: <span className={styles.weapon_value}>{damagetaken}</span><br />{}
                    {/* Damage dealt ({legend?.weapon_one}): <span className={styles.weapon_value}>{((d(amagedealt_weaponone / damagedealt) * 100) ).toFixed(2) + '%'}</span><br />
                            Damage dealt ({legend?.weapon_two}): <span className={styles.weapon_value}>{((d(amagedealt_weapontwo / damagedealt) * 100) ).toFixed(2) + '%'}</span><br /> */}
                    <span className="tooltip text-left" data-tip={`${legend?.weapon_one}: ${(((matchtime_weaponone / matchtime) * 100) || 0).toFixed(2)}%\n${legend?.weapon_two}: ${(((matchtime_weapontwo / matchtime) * 100) || 0).toFixed(2)}%\nUnarmed: ${(((matchtime_unarmed / matchtime) * 100) || 0).toFixed(2)}%`}>
                    Avg. Matchtime: <span className={styles.weapon_value}>{matchtime}s</span><br />
                    </span>
                    {/* Matchtime ({legend?.weapon_one}): <span className={styles.weapon_value}>{matchtime_weaponone}</span><br />
                            Matchtime ({legend?.weapon_two}): <span className={styles.weapon_value}>{matchtime_weapontwo}</span><br /> */}
                </div>
            </div>
        </div>
    )
}
type props = LegendStats & {
    totalGames: number;
    index: number
}
export default LegendGlobalStatsItem