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"
import { handleError } from "../../utility/error-handle"

export const StatusBox = () => {
    const { data, isLoading, error } = 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?.walletBalance
            },
            // {
            //     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])

    useEffect(() => {
        handleError(error)
    }, [error])

    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>
    )
}