import {
  ArrayInput,
  BooleanInput,
  CreateInDialogButton,
  EditInDialogButton,
  ImageInput,
  SelectArrayInput,
  SimpleForm,
  TabbedForm,
  TableFormIterator,
  TextInput,
  useThemeConfig
} from '@applica-software-guru/react-admin';
import { Grid } from '@mui/material';
import PropTypes from 'prop-types';
import { useRecordContext } from 'ra-core';

function UserForm({ roles }) {
  const { spacing } = useThemeConfig();
  const record = useRecordContext();
  return (
    <SimpleForm defaultValues={{ active: true }}>
      <Grid container spacing={spacing}>
        <Grid item lg={6} xs={12}>
          <TextInput source="email" fullWidth helperText="E-mail (ex. roob@applica.it)" />
        </Grid>
        {record?.id ? (
          <Grid item lg={6} xs={12}>
            <TextInput source="password" fullWidth type="password" />
          </Grid>
        ) : null}
        <Grid item lg={12} xs={12}>
          <TextInput source="name" fullWidth />
        </Grid>
        <Grid item lg={12} xs={12}>
          <SelectArrayInput source="roles" label="ra.user.roles" choices={roles} fullWidth />
        </Grid>
        <Grid item lg={12} xs={12}>
          <ImageInput source="image" accept="image/*" multiple={false} fullWidth />
        </Grid>
      </Grid>
      <BooleanInput source="active" />
    </SimpleForm>
  );
}

export { UserForm };