import { useEffect, useState } from "react"
import { Table } from "../common/table"
import { scoresCol } from "../../utility/score"
import { useMutation } from "@tanstack/react-query"
import { getScoresList } from "../../services/api/score"
import { useParamsStore } from "../../store/params"
import { ScoreResponse } from "../../types"

export const Score = () => {
    const { params } = useParamsStore()
    const [data, setData] = useState<ScoreResponse>({
        data: [],
        total: 0,
        score: 0
    })
    const { mutate, isPending } = useMutation({
        mutationFn: getScoresList
    })
    useEffect(() => {
        mutate({
            ...params
        },
            {
                onSuccess: (res: any) => {
                    setData({
                        data: res?.data?.data,
                        total: res?.data?.total,
                        score: res?.data?.score
                    })
                }
            })
    }, [mutate, params])
    return (
        <Table columns={scoresCol} data={data?.data} tableStatus={true} tableScore={data?.score} isLoading={isPending} totalData={data?.total} />
    )
}