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 { useNavigate } from 'react-router-dom'
import AddButton from '../../Layout/Dashboard/AddButton/AddButton'
import { useGetProject } from '../../api/Project'
import SelectField from '../../Layout/Dashboard/SelectField'

function Page() {

    const column   =useTableColumns()
    const {data  ,status } = useGetProject()
    const navigate = useNavigate()
    const ExpandedComponent = ({ data }:any) => {
      console.log(data,"data");
      
      return (
        <div className='p-2'>
          <p >description : {data?.description}</p>
        </div>
      );
    };
    const typeselect = [
      {label : "website" , value : "website"},
      {label : "mobile" , value : "mobile"},

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

      <DashHeader showAddButton={false} title={'Project'}>
      <div className='RightSide d-flex gap-2 align-center '>
      <SelectField selectBy="type" lebel="type" option={typeselect} />
     <AddButton  onClick={()=>navigate('/project/add')}></AddButton>
     </div>
      </DashHeader>

      
      <LyTable
        data={data?.data}
        isLoading={false}
        columns={column}
        is_pagination={false}
        expandableRows 
        expandableRowsComponent={ExpandedComponent}
    />
      
    
    </DashBody>
  )
}

export default Page