import { useQuery } from "@tanstack/react-query"
import { StatusBoxItemInterface } from "../../types"
import { StatusBoxItem } from "../common/status-box-items"
import { getOverviewDetails } from "../../services/api/overview"
import { useEffect, useState } from "react"
import { Coin1, DollarCircle, Radar, Star } from "iconsax-react"
import { HomeStatusSkeleton } from "./status-skeleton"

export const StatusBox = () => {
    const { data, isLoading } = useQuery({
        queryKey: ['overview'],
        queryFn: getOverviewDetails
    })
    const [statusData, setStatusData] = useState<StatusBoxItemInterface[] | []>([])

    useEffect(() => {
        setStatusData([{
            name: "dollar",
            title: "دارایی دلاری",
            icon: <DollarCircle color="#292D32" variant="Bold" className="size-[40px]" />,
            value: data?.data?.user?.dollarBalance
        },
        {
            name: "coin",
            title: "دارایی از تمدید اشتراک",
            icon: <Coin1 color="#292D32" variant="Bold" className="size-[40px]" />,
            value: data?.data?.user?.walletBalance
        },
        {
            name: "star",
            title: "امتیاز شرکت در قرعه کشی",
            icon: <Star color="#292D32" variant="Bold" className="size-[40px]" />,
            value: data?.data?.user?.score
        },
        {
            name: "radar",
            title: "تعداد کل دستگاه ثبت شده موفق",
            icon: <Radar color="#292D32" variant="Bold" className="size-[40px]" />,
            value: data?.data?.installedDevice
        }])
    }, [data])

    if (isLoading) return <HomeStatusSkeleton />
    return (
        <div className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-4 gap-6">
            {statusData?.map((item: StatusBoxItemInterface) => <StatusBoxItem key={item?.name} item={item} />)}
        </div>
    )
}