import React from 'react';
import { GridRenderCellParams } from '@mui/x-data-grid';
import ImageField from '../ImageField';
import {
  createColumnLoader,
  ColumnMetadata,
} from '../DataGrid/configBuilderFactory';

const USERS_COLUMNS: ColumnMetadata[] = [
  {
    field: 'firstName',
    headerName: 'First Name',
    type: 'text',
    editable: true,
  },
  { field: 'lastName', headerName: 'Last Name', type: 'text', editable: true },
  {
    field: 'phoneNumber',
    headerName: 'Phone Number',
    type: 'text',
    editable: true,
  },
  { field: 'email', headerName: 'E-Mail', type: 'text', editable: true },
  {
    field: 'disabled',
    headerName: 'Disabled',
    type: 'boolean',
    editable: true,
  },
  {
    field: 'avatar',
    headerName: 'Avatar',
    type: 'image',
    editable: false,
    renderCell: (params: GridRenderCellParams) => (
      <ImageField
        name='Avatar'
        image={params?.row?.avatar}
        className='w-24 h-24 mx-auto lg:w-6 lg:h-6'
      />
    ),
  },
  {
    field: 'app_role',
    headerName: 'App Role',
    type: 'singleSelectRelation',
    entityRef: 'roles',
    editable: true,
  },
  {
    field: 'custom_permissions',
    headerName: 'Custom Permissions',
    type: 'relationMany',
    entityRef: 'permissions',
    editable: false,
  },
  { field: 'actions', headerName: '', type: 'actions' },
];

export const loadColumns = createColumnLoader({
  entityName: 'users',
  columns: USERS_COLUMNS,
});
