import { useRoles } from '../hooks/swrHooks'
import { CreateField } from '../interfaces/create'
import RoleService from '../services/RoleService'
import { Loader, Stack } from '@mantine/core'
import CustomTable from '../components/CustomTable'

export default function Roles() {
  const { roles, isError, isLoading } = useRoles()

  const createFields: CreateField[] = [
    { key: 'name', headerName: 'Название', type: 'string', required: true, defaultValue: '' },
    { key: 'description', headerName: 'Описание', type: 'string', required: false, defaultValue: '' },
  ]

  if (isError) return <div>Произошла ошибка при получении данных.</div>
  if (isLoading) return <Loader />

  return (
    <Stack w={'100%'} h={'100%'} p='sm'>
      <CustomTable
        createFields={createFields}
        submitHandler={RoleService.createRole}
        data={roles} columns={[
          {
            accessorKey: 'id',
            header: 'id',
            cell: (info) => info.getValue(),
          },
          {
            accessorKey: 'name',
            header: 'Название',
            cell: (info) => info.getValue(),
          },
          {
            accessorKey: 'description',
            header: 'Описание',
            cell: (info) => info.getValue(),
          },
        ]} />
    </Stack>
  )
}