import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  TextField,
  Autocomplete,
} from '@mui/material';
import { ReactElement, useState } from 'react';
import { SupportCaseApi } from 'types';

type CreateSupportCaseDialogProps = {
  showDialog: boolean;
  closeDialog: () => void;
  createSupportCase: (supportCase: Omit<SupportCaseApi, 'id' | 'status' | 'messages' | 'created_at' | 'updated_at'>) => void;
};

const categoryOptions = ['question', 'bug', 'other'];

const CreateSupportCaseDialogContent = ({
  showDialog,
  closeDialog,
  createSupportCase,
}: CreateSupportCaseDialogProps): ReactElement => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [category, setCategory] = useState<string | null>(null);

  const handleCreate = () => {
    if (title && description && category) {
      createSupportCase({ title, description, category });
    }
  };

  return (
    <Dialog open={showDialog} onClose={closeDialog} fullWidth>
      <DialogTitle>Create a New Support Case</DialogTitle>
      <DialogContent>
        <TextField
          autoFocus
          margin="dense"
          id="title"
          label="Title"
          type="text"
          fullWidth
          variant="outlined"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
        <TextField
          margin="dense"
          id="description"
          label="Description"
          type="text"
          fullWidth
          multiline
          rows={4}
          variant="outlined"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
        />
        <Autocomplete
          options={categoryOptions}
          onChange={(event, newValue) => {
            setCategory(newValue);
          }}
          renderInput={(params) => (
            <TextField {...params} label="Category" variant="outlined" />
          )}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={closeDialog}>Cancel</Button>
        <Button onClick={handleCreate} color="primary" disabled={!title || !description || !category}>
          Create
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default CreateSupportCaseDialogContent;
