import { useState } from 'react'
import { Box, Button, CircularProgress, Modal } from '@mui/material'
import { DataGrid, GridColDef } from '@mui/x-data-grid'
import { useRoles } from '../hooks/swrHooks'
import { CreateField } from '../interfaces/create'
import RoleService from '../services/RoleService'
import FormFields from '../components/FormFields'

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

  const [open, setOpen] = useState(false)

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

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

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

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

      <Modal
        open={open}
        onClose={() => setOpen(false)}
      >
        <FormFields
          sx={{
            position: 'absolute' as 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            width: 400,
            bgcolor: 'background.paper',
            boxShadow: 24,
            p: 4,
          }}
          fields={createFields}
          submitHandler={RoleService.createRole}
          title="Создание роли"
        />
      </Modal>

      <DataGrid
        autoHeight
        style={{ width: "100%" }}
        rows={roles}
        columns={columns}
        initialState={{
          pagination: {
            paginationModel: { page: 0, pageSize: 10 },
          },
        }}
        pageSizeOptions={[10, 20, 50, 100]}
        disableRowSelectionOnClick

        processRowUpdate={(updatedRow) => {
          return updatedRow
        }}

        onProcessRowUpdateError={() => {
        }}
      />
    </Box>
  )
}