import { installationReportsCol } from "../../utility/reports"
import { Table } from "../common/table"
import { useEffect, useState } from "react"
import { useMutation } from "@tanstack/react-query"
import { getRegisterDeviceList } from "../../services/api/register-device"
import { RegisterDeviceResponse } from "../../types"
import { useParamsStore } from "../../store/params"

export const InstallationReports = () => {
    const { params } = useParamsStore()
    const [data, setData] = useState<RegisterDeviceResponse>({
        data: [],
        total: 0
    })
    const { mutate, isPending } = useMutation({
        mutationFn: getRegisterDeviceList
    })
    useEffect(() => {
        mutate({
            ...params
        },
            {
                onSuccess: (res: any) => {
                    setData({
                        data: res?.data?.data,
                        total: res?.data?.total
                    })
                }
            })
    }, [mutate, params])
    return (
        <Table columns={installationReportsCol} data={data?.data} totalData={data?.total} isLoading={isPending} />
    )
}