import LegendGridItem from "./LegendStatsGridItem"
// @ts-ignore
import {CSSProperties} from "react"
import { LegendStats } from "helper/types"
let styles:CSSProperties = {
    display: "grid",
    gridTemplateColumns: `repeat(auto-fill, minmax(16rem, 1fr))`,
    gap: "2.5rem",
    paddingLeft: "0.5rem",
    paddingRight: "0.5rem",
    overflowX: "hidden"
}

const LegendGlobalGrid = ({
    legends = [],
}:props) => {
    let invalidData = Array.isArray(legends) ? legends.every(l => l === null) : true
    let totalGames = (!invalidData && Array.isArray(legends)) ? legends.reduce((acc, cur) => acc + (cur?.games || 0), 0) : 0
    return(
    <div>
    {(!invalidData && Array.isArray(legends)) ? (
        <div style={!invalidData ? {...styles,
    
        } : {
            width: "100%",
            height: "100%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            
        }}>
    
    {(Object.keys(legends)).map((index) => {
    let legendStats = legends[Number(index)]
    if(legendStats === null) return
        return(
        <LegendGridItem index={Number(index)} totalGames={totalGames} key={`weapon_${index}`} {...legendStats} />
        )
    })}
        </div>
    ) : (
        <div className="font-Coda text-center text-gold-300 text-4xl">No data, Please check back later</div>
    )}
    </div>
    )
    }
    interface props {
        legends: Array<LegendStats>|null
    }
export default LegendGlobalGrid