import { useRoles } from '../hooks/swrHooks'
import { CreateField } from '../interfaces/create'
import RoleService from '../services/RoleService'
import CustomTable from '../components/CustomTable'
import { Spinner } from '@fluentui/react-components'

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 <Spinner />

  return (
    <div style={{
      width: '100%',
      height: '100%',
      padding: '1rem'
    }} >
      <CustomTable
        createFields={createFields}
        submitHandler={RoleService.createRole}
        data={roles} columns={[
          {
            name: 'id',
            header: 'id',
            type: 'number'
          },
          {
            name: 'name',
            header: 'Название',
            type: 'string'
          },
          {
            name: 'description',
            header: 'Описание',
            type: 'string'
          },
        ]} />
    </div>
  )
}