import {
  FormControl,
  Input,
  InputLabel,
  MenuItem,
  Select,
} from '@material-ui/core';
import { availableRoles } from 'api/configuration';
import { User } from 'features/user/userSlice';
import { EditComponentProps } from 'material-table';
import React from 'react';

export default function EditRole({
  value,
  rowData,
  onChange,
}: EditComponentProps<Omit<User, 'loading' | 'token'>>) {
  return (
    <FormControl>
      <InputLabel id={`${rowData.profile.name}-edit-roles-label`}>
        Roles
      </InputLabel>
      <Select
        labelId={`${rowData.profile.name}-edit-roles-label`}
        id={`${rowData.profile.name}-edit-roles-select`}
        multiple
        value={value}
        onChange={({ target: { value } }) => onChange(value)}
        input={<Input />}
      >
        {availableRoles.map(role => (
          <MenuItem key={role} value={role}>
            {role}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}