import { useState } from 'react'
import RoleCard from '../components/RoleCard'
import Modal from '../components/Modal'
import useDataFetching from '../components/FetchingData'
import RoleService from '../services/RoleService'
import { Box, Button } from '@mui/material'
import DataTable from '../components/DataTable'
import { GridColDef } from '@mui/x-data-grid'

interface IRoleCard {
  id: number
  name: string
  description: string
}

interface Props {
  showModal: boolean;
}

function Roles() {
  const [showModal, setShowModal] = useState<Props>({ showModal: false });
  const cards = useDataFetching<IRoleCard[]>(`${import.meta.env.VITE_API_AUTH_URL}/auth/roles/`, [])

  const columns: GridColDef[] = [
    { field: 'id', headerName: 'ID', type: "number", width: 70 },
    { field: 'name', headerName: 'Название', width: 90 },
    { field: 'description', headerName: 'Описание', width: 90 },
  ];

  return (
    <Box sx={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'flex-start',
      gap: '16px',
      flexGrow: 1
    }}>
      <Button onClick={() => console.log("TODO: Add")}>
        Добавить роль
      </Button>

      {cards &&
        <DataTable rows={cards} columns={columns} />
      }
    </Box>
  )

  return (
    <div>
      {cards.length > 0 && cards.map((card, index) => <RoleCard key={index} {...card} />)}
      <button className='absolute w-0 h-0' onClick={() => setShowModal({ showModal: true })}>+</button>
      <Modal {...showModal} />
    </div>
  )
}

export default Roles