import Image from "next/image"
import { secondsToDhms, secondsTohm } from "helper"
import styles from "styles/WeaponGridItem.module.css"
import { Dispatch, SetStateAction, useState } from "react";
import type { PlayerStats, PlayerRanked, TotalStatsStatsType, TotalStatsRankedType } from "helper/types";


const LegendGridItem = ({
    legend_id = 3,
    bio_name = "Placeholder", 
    stats, ranked,
    weapon_one,
    weapon_two,
    index = 0,
    total = false, useRanked = false}:props) => {
    const [load, setLoad] = useState(index <= 5)
    if(useRanked) return <LegendGridItemRanked legend_id={legend_id} bio_name={bio_name}
    ranked={ranked} index={index}
    load={load} setLoad={setLoad} 
    total={total} />;
    let losses = (Number(stats?.games) - Number(stats?.wins)) || 0
    let winrate = (((Number(stats?.wins) / Number(stats?.games)) * 100) || 0).toFixed(2)
    let lvl:string|number = stats?.level ? `${stats?.level}(${stats?.xp.toLocaleString()})` : 0
    let weapon_one_name:string|undefined = weapon_one
    let weapon_two_name:string|undefined = weapon_two
    if(weapon_one_name?.toLowerCase() === "rocketlance") {
        weapon_one_name = "Lance"
    }
    if(weapon_two_name?.toLowerCase() === "rocketlance") {
        weapon_two_name = "Lance"
    }
        if(index >= 5 && !load) {
            setTimeout(() => {
                setLoad(true)
            },0)
        }
    if(!load) return null
    return (
        <div className={styles.parent}>
        <div className={styles.imageContainer}>
            {!total ? <div className={styles.image}>
                <Image
                loading={index >= 5 ? "eager" : "lazy"}
                    width={76.5}
                    height={76.5}
                    src={`/assets/legends/${legend_id}.png`}
                    alt={bio_name} />
            </div> : null}
        </div>
        <div className={styles.content}>
            <h1>{bio_name}</h1>
            <div>
            Level: <span className={styles.weapon_value}>{lvl}</span> <br />
            Games: <span className={styles.weapon_value}>{(stats?.games || 0).toLocaleString()}</span> <br />
            Wins: <span className={styles.weapon_value}>{(stats?.wins || 0).toLocaleString()}</span> <br />
            Losses: <span className={styles.weapon_value}>{losses.toLocaleString()}</span> <br />
            Winrate: <span className={styles.weapon_value}>{winrate}%</span><br />

            Falls/Deaths: <span className={styles.weapon_value}>{(Number(stats?.falls) || 0).toLocaleString()}</span><br />

                Suicides: <span className={styles.weapon_value}>{(Number(stats?.suicides) || 0).toLocaleString()}</span><br />
                    <span className={!total ? "tooltip" : ""} data-tip={`${weapon_one_name}: ${(((Number(stats?.koweaponone) / Number(stats?.kos)) * 100) || 0).toFixed(2)}%\n${weapon_two}: ${(((Number(stats?.koweapontwo) / Number(stats?.kos)) * 100) || 0).toFixed(2)}%\nUnarmed: ${(((Number(stats?.kounarmed) / Number(stats?.kos)) * 100) || 0).toFixed(2)}%\nGadgets: ${(((Number(stats?.kogadgets) / Number(stats?.kos)) * 100) || 0).toFixed(2)}%`}>
                    KOs: <span className={styles.weapon_value}>{(Number(stats?.kos) || 0).toLocaleString()}</span>
                    </span>
                <br/>
                <span className={!total ? "tooltip" : ""} data-tip={!total ? `${weapon_one_name}: ${(((Number(stats?.damageweaponone) / Number(stats?.damagedealt)) * 100) || 0).toFixed(2)}%\n${weapon_two}: ${(((Number(stats?.damageweapontwo) / Number(stats?.damagedealt)) * 100) || 0).toFixed(2)}%\nUnarmed: ${(((Number(stats?.damageunarmed) / Number(stats?.damagedealt)) * 100) || 0).toFixed(2)}%\nGadgets: ${(((Number(stats?.damagegadgets) / Number(stats?.damagedealt)) * 100) || 0).toFixed(2)}%` : ''}>
                    Damage dealt: <span className={styles.weapon_value}>{(Number(stats?.damagedealt) || 0).toLocaleString()}</span>
                </span>
                <br />
                {!total ? <>Avg. Damage Dealt: <span className={styles.weapon_value}>{(Number(stats?.damagedealt) / Number(stats?.games) || 0).toFixed(2)}</span>                <br/></> : null}
                Damage Taken: <span className={styles.weapon_value}>{(Number(stats?.damagetaken) || 0)?.toLocaleString()}</span><br />{}
                {/* Damage dealt ({legend?.weapon_one_name}): <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"} data-tip={secondsToDhms(stats?.matchtime || 0)}>
                    Matchtime: <span className={styles.weapon_value}>{stats?.matchtime ? secondsTohm(stats?.matchtime) : '0s'}</span><br />
                    </span>
                    <br/>
                    {!total ? (
                    <>
                    Timeheld ({weapon_one_name}): <span className={styles.weapon_value}>{stats?.timeheldweaponone ? secondsTohm(stats?.timeheldweaponone) : '0s'}</span><br />
                    Timeheld ({weapon_one_name}): <span className={styles.weapon_value}>{stats?.timeheldweapontwo ? secondsTohm(stats?.timeheldweapontwo) : '0s'}</span><br />
                    </>
                    ) : null}
                    {total ? <>
                    Most played Legend: <span className={styles.weapon_value}>{(stats as any)?.favLegend}</span><br />
                    Least played Legend: <span className={styles.weapon_value}>{(stats as any)?.leastFavLegend}</span><br />
                    Avg. Damage (Dealt): <span className={styles.weapon_value}>{((stats as any)?.avg_damage_dealt || 0).toLocaleString()}</span><br />
                    Avg. Damage (Taken): <span className={styles.weapon_value}>{((stats as any)?.avg_damage_taken || 0).toLocaleString()}</span><br />
                    Avg. KOs: <span className={styles.weapon_value}>{((stats as any)?.avg_kos || 0).toLocaleString()}</span><br />
                    Avg. Level: <span className={styles.weapon_value}>{((stats as any)?.avg_lvl || 0).toLocaleString()}</span><br />
                    </>
                    : null}

            </div>
        </div>
    </div>

    );
}
const LegendGridItemRanked = ({
    legend_id = 3,
    bio_name = "Placeholder", 
    ranked,
    load = false,
    setLoad = (t) => t,
    index = 0,
    total = false}:LegendGridItemRankedProps) => {
        let losses = (Number(ranked?.games) - Number(ranked?.wins)) || 0
        let winrate = (((Number(ranked?.wins) / Number(ranked?.games)) * 100) || 0).toFixed(2)
    
            if(index >= 5 && !load) {
                setTimeout(() => {
                    setLoad(true)
                },0)
            }
        if(!load) return null
        return (
            <div className={styles.parent}>
            <div className={styles.imageContainer}>
                {!total ? <div className={styles.image}>
                    <Image
                    loading={index >= 5 ? "eager" : "lazy"}
                        width={76.5}
                        height={76.5}
                        
                        src={`/assets/legends/${legend_id}.png`}
                        alt={bio_name} />
                </div> : null}
            </div>
            <div className={styles.content}>
                <h1>{bio_name}</h1>
                <div>
                {!total ? <>Tier: <span className={styles.weapon_value}>{(ranked as any)?.tier || "None"}</span> <br /></> : null}
                Games: <span className={styles.weapon_value}>{(ranked?.games || 0).toLocaleString()}</span> <br />
                Wins: <span className={styles.weapon_value}>{(ranked?.wins || 0).toLocaleString()}</span> <br />
                Losses: <span className={styles.weapon_value}>{losses.toLocaleString()}</span> <br />
                Winrate: <span className={styles.weapon_value}>{winrate}%</span><br />
                Rating{total && " gained"}: <span className={styles.weapon_value}>{(ranked?.rating || 0).toLocaleString()}</span>
                <br />
                Peak Rating{total && " gained"}: <span className={styles.weapon_value}>{(ranked?.peak_rating || 0).toLocaleString()}</span>
                <br />
                {total ? <>
                Highest rated Legend: <span className={styles.weapon_value}>{(ranked as any)?.mostPlayed}</span><br />
                Least rated Legend: <span className={styles.weapon_value}>{(ranked as any)?.leastPlayed}</span><br />
                <span className="tooltip" data-tip="Legends with less than 5 games won't be counted">
                Avg. Rating per legend: <span className={styles.weapon_value}>{((ranked as any)?.avg_rating || 0)?.toFixed(2)}</span><br />
                </span><br/>
                Legends played: <span className={styles.weapon_value}>{(ranked as any)?.playedLegends || 0}</span><br />

                </>
                : null}
                </div>
            </div>
        </div>
        );
    }
// @ts-ignore
interface props {
    total?: boolean
    stats?: PlayerStats["legends"][number]|TotalStatsStatsType
    ranked?: PlayerRanked["legends"][number]|TotalStatsRankedType
    useRanked?: boolean
    observeElement?: boolean
    index?: number
    load?: boolean
    legend_id:number,
    bio_name:string, 
    weapon_one?:string,
    weapon_two?:string,

    setLoad?: (load:boolean) => void
}

interface LegendGridItemRankedProps {
        legend_id:number,
        bio_name:string, 
        ranked?: PlayerRanked["legends"][number]|TotalStatsRankedType
        load:boolean,
        setLoad?:Dispatch<SetStateAction<boolean>>,
        index:number,
        total:boolean
}
    export default LegendGridItem;