
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 { useGetProduct } from '../../api/product'
import { useNavigate } from 'react-router-dom'
import AddButton from '../../Layout/Dashboard/AddButton/AddButton'
import SearchField from '../../Layout/Dashboard/SearchField'
import SelectField from '../../Layout/Dashboard/SelectWSearchField'
import { useGetCategories } from '../../api/Categories'

function ProductsPage() {

    const column   =useTableColumns()
    const {data  ,status } = useGetProduct()
    const navigate = useNavigate()
    const totalRows = data?.meta?.total;
    const { data:Categories } = useGetCategories()
    const language = localStorage.getItem("language") ?? "en"

  const SelectData = Categories?.categories?.map((item:any)=>(
    {
      label : item?.name[language],
      value : item?.id
    }
  ))
  

  return (
    <DashBody status={status as QueryStatusEnum} >
    <DashHeader showAddButton={false} title={'products'}>
      <div className='RightSide  d-flex gap-2 align-center  '>

     <SelectField selectBy="category" submiteBy="category_id" lebel="category" option={SelectData} />
     <SearchField searchBy="name"/>

     <AddButton  onClick={()=>navigate('/products/add')}></AddButton>

     </div>
    </DashHeader>
      
      <LyTable
        data={data?.BaseProducts}
        isLoading={false}
        columns={column}
        total={totalRows }
        is_pagination={true}
    />
      
    
    </DashBody>
  )
}

export default ProductsPage

