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

const ImportInfluencerErrorLog = (props) => {
    const { fileManagerID } = props
    const { translations } = useTranslation();
    const [search, setSearch] = useState('');
    const [modal, setModal] = useState<any>(null)
    const [deleteModal, setDeleteModal] = useState<any>(null);
    const [params, setParams] = useState({ page: 1, per_page: 10, sort_by: "", sort: "DESC" });

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

    const callBack = () => {
        setModal(true)
    }
    return (
        <>
            <div className='border border-lightGray p-3 rounded-lg mb-5 flex items-center gap-7 flex-wrap'>
                <div className='flex items-center gap-2'>
                    <label>Source : </label>
                    <span className='font-semibold'>{ImportInfluencerErrorLogData?.file_manager?.source_from}</span>
                </div>
                <div className='flex items-center gap-2'>
                    <label>Failed Row : </label>
                    <span className='font-semibold'>{ImportInfluencerErrorLogData?.file_manager?.failed_row_count}</span>
                </div>
                <div className='flex items-center gap-2'>
                    <label>Success Row : </label>
                    <span className='font-semibold'>{ImportInfluencerErrorLogData?.file_manager?.success_row_count}</span>
                </div>
                <div className='flex items-center gap-2'>
                    <label>Total Row : </label>
                    <span className='font-semibold'>{ImportInfluencerErrorLogData?.file_manager?.total_row_count}</span>
                </div>
                <div className='flex items-center gap-2'>
                    <label>Status : </label>
                    <span className='font-semibold'>{ImportInfluencerErrorLogData?.file_manager?.status}</span>
                </div>
            </div>
            <ImportInfluencerErrorLogTable
                searchBtnProps={{
                    buttonRequired: false,
                    setSearch: setSearch,
                    // title: "Import File",
                    // callBack: callBack,
                }}
                apiData={{
                    data: ImportInfluencerErrorLogData,
                    params: params,
                    setParams: setParams,
                    isPending: isPending,
                    refetch: refetch
                }}
                search={search}
                modal={modal}
                setModal={setModal}
                deleteModal={deleteModal}
                setDeleteModal={setDeleteModal}
                translations={translations}
            />
        </>
    )
}

export default ImportInfluencerErrorLog;