
import React 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 { useGetUsers } from '../../api/users'
import SearchField from '../../Layout/Dashboard/SearchField'
import SelectField from '../../Layout/Dashboard/SelectField'
import AddButtonNotification from './ui/AddButtonNotification'

function Page() {

    const column   =useTableColumns()
    const {data  ,status } = useGetUsers()

    const totalRows = data?.meta?.total;


    const typeData = [{label:"admin",value:"admin"},{value:"user",label:"user"}]
    const statusData = [{label:"active",value:"active"},{label:"inActive",value:"inActive"}]


  return (
    // Pass Status to Layout 
    <DashBody status={status as QueryStatusEnum} >

      <DashHeader showAddButton={false} title={'users'}>
      <div className='FillterSection'>
    <AddButtonNotification/>

     <SearchField searchBy={"email"} />
     <SelectField  selectBy="type"  lebel="type" option={typeData} />
     <SelectField  selectBy="state"  lebel="status" option={statusData} />


     </div>
      </DashHeader>

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

export default Page

