import React, { useEffect } from 'react'
import DashBody from '../../Layout/Dashboard/DashBody'
import DashHeader from '../../Layout/Dashboard/DashHeader'
import LyTable from '../../Layout/Dashboard/LyTable'
import useTableColumns from './useTableColumns'
import { QueryStatusEnum } from '../../config/QueryStatus'
import { useNavigate } from 'react-router-dom'
import AddButton from '../../Layout/Dashboard/AddButton/AddButton'
import { useGetCategories } from '../../api/Categories'
import SearchField from '../../Layout/Dashboard/SearchField'
import { usePageState } from '../../lib/state mangment/LayoutPagestate'

function Page() {

    const column   =useTableColumns()
    const {data ,isRefetching ,status } = useGetCategories()
    const navigate = useNavigate()
    const totalRows = data?.meta?.total;
    const { setObjectToEdit, objectToEdit } = usePageState()
    console.log(objectToEdit,"objectToEdit");

    useEffect(() => {
      console.log(objectToEdit,"objectToEdit");
      if(objectToEdit)
      setObjectToEdit(null)
    
    
    }, [setObjectToEdit,objectToEdit ,data,isRefetching])
    
  return (
    // Pass Status to Layout 
    <DashBody status={status as QueryStatusEnum} >
      <DashHeader showAddButton={false} title={'categories'}>
     <div className='RightSide d-flex gap-2 align-center '>
     <SearchField  searchBy={"name"}  />

     <AddButton  onClick={()=>navigate('/categories/add')}></AddButton>
     </div>
      </DashHeader>
      
      <LyTable
        data={data?.categories}
        isLoading={false}
        columns={column}
        total={totalRows }
        is_pagination={true}
    />
      
    
    </DashBody>
  )
}

export default Page