'use client'
import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { useTranslation } from "@/Utils/Hooks/useTranslate";
import CustomFetch from "@/Utils/APIRequest/AxiosInstance";
import { DisputeAPI } from "@/Utils/APIRequest/Endpoints";
import AdminDisputeTable from "./AdminDisputeTable"

const Disputes = () => {
    const { translations } = useTranslation();
    const [search, setSearch] = useState('');
    const [deleteModal, setDeleteModal] = useState<any>(null);
    const [params, setParams] = useState({ page: 1, per_page: 50, sort_by: "created_at", sort: "DESC" });

    // API GET
    const { data: AdminDisputeData, fetchStatus, isPending, refetch } = useQuery({ queryKey: [DisputeAPI, search, params], queryFn: () => CustomFetch({ url: DisputeAPI, params: { search: search, ...params } }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data })

    return (
        <AdminDisputeTable
            searchBtnProps={{
                setSearch: setSearch,
                buttonRequired: false
            }}
            apiData={{
                data: AdminDisputeData,
                params: params,
                setParams: setParams,
                isPending: isPending,
                refetch: refetch,
                fetchStatus: fetchStatus
            }}
            search={search}
            deleteModal={deleteModal}
            setDeleteModal={setDeleteModal}
            translations={translations}
            refetch={refetch}
        />
    )
}

export default Disputes