link-stack/apps/link/app/(main)/overview/[overview]/_components/TicketCreateDialog.tsx

"use client";

import { FC, useState } from "react";
import {
  Grid,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  TextField,
  Autocomplete
} from "@mui/material";
import { useSWRConfig } from "swr";
import { createTicketMutation } from "app/_graphql/createTicketMutation";

interface TicketCreateDialogProps {
  open: boolean;
  closeDialog: () => void;
}

export const TicketCreateDialog: FC<TicketCreateDialogProps> = ({
  open,
  closeDialog,
}) => {
  const [kind, setKind] = useState("note");
  const [customerID, setCustomerID] = useState("");
  const [groupID, setGroupID] = useState("");
  const [ownerID, setOwnerID] = useState("");
  const [priorityID, setPriorityID] = useState("");
  const [stateID, setStateID] = useState("");
  const [tags, setTags] = useState([]);
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");
  const backgroundColor = kind === "note" ? "#FFB620" : "#1982FC";
  const color = kind === "note" ? "black" : "white";
  const { fetcher } = useSWRConfig();
  const ticket = {
    customerId: customerID,
    groupId: groupID,
    ownerId: ownerID,
    priorityId: priorityID,
    stateId: stateID,
    tags,
    title,
    article: {
      body,
      type: kind,
      internal: kind === "note",
    }
  };


  const createTicket = async () => {
    await fetcher({
      document: createTicketMutation,
      variables: {
        input: {
          ticket
        },
      },
    });
    closeDialog();
    setBody("");
  };

  return (
    <Dialog open={open} maxWidth="md" fullWidth>
      <DialogContent>
        <Grid container direction="column" spacing={2}>
          <Grid item>
            <TextField
              label={"Title"}
              fullWidth
              value={title}
              onChange={(e: any) => setTitle(e.target.value)}
            />
          </Grid>
          <Grid item>
            <Autocomplete
              disablePortal
              options={[{ label: "Test One", id: 1 }, { label: "Test Two", id: 2 }]}
              sx={{ width: 300 }}
              onChange={(e: any) => setCustomerID(e.target.value)}
              renderInput={(params) => <TextField {...params} label="Customer" />}
            />
          </Grid>
          <Grid item>
            <TextField
              label={"Details"}
              multiline
              rows={10}
              fullWidth
              value={body}
              onChange={(e: any) => setBody(e.target.value)}
            />
          </Grid>
        </Grid>
      </DialogContent>
      <DialogActions sx={{ px: 3, pt: 0, pb: 3 }}>
        <Grid container justifyContent="space-between">
          <Grid item>
            <Button
              sx={{
                backgroundColor: "white",
                color: "#666",
                fontFamily: "Poppins, sans-serif",
                fontWeight: 700,
                borderRadius: 2,
                textTransform: "none",
              }}
              onClick={() => {
                setBody("");
                closeDialog();
              }}
            >
              Cancel
            </Button>
          </Grid>
          <Grid item>
            <Button
              sx={{
                backgroundColor,
                color,
                fontFamily: "Poppins, sans-serif",
                fontWeight: 700,
                borderRadius: 2,
                textTransform: "none",
                px: 3,
              }}
              onClick={createTicket}
            >
              {kind === "note" ? "Save Note" : "Send Reply"}
            </Button>
          </Grid>
        </Grid>
      </DialogActions>
    </Dialog>
  );
};