import { FC, useState } from "react";
import { Grid, Button, Dialog, DialogActions, DialogContent, TextField } from "@mui/material";
import { useSWRConfig } from "swr";
import { updateTicketMutation } from "graphql/updateTicketMutation";

interface ArticleCreateDialogProps {
  ticketID: string;
  open: boolean;
  closeDialog: () => void;
  kind: "reply" | "note";
}

export const ArticleCreateDialog: FC<ArticleCreateDialogProps> = ({ ticketID, open, closeDialog, kind }) => {
  const [body, setBody] = useState("");
  const backgroundColor = kind === "reply" ? "#1982FC" : "#FFB620";
  const color = kind === "reply" ? "white" : "black";
  const { fetcher } = useSWRConfig();
  const createArticle = async () => {
    await fetcher(
      {
        document: updateTicketMutation,
        variables: {
          ticketId: `gid://zammad/Ticket/${ticketID}`,
          input: {
            article: {
              body,
              type: kind === "note" ? "note" : "phone",
              internal: kind === "note"
            }
          }
        }
      });
    closeDialog();
    setBody("");
  }

  return (
    <Dialog open={open} maxWidth="sm" fullWidth >
      <DialogContent>
        <TextField label={kind === "reply" ? "Write reply" : "Write internal note"} multiline rows={10} fullWidth value={body} onChange={(e: any) => setBody(e.target.value)} />
      </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={createArticle}
            >{kind === "reply" ? "Send Reply" : "Save Note"}</Button>
          </Grid>
        </Grid>
      </DialogActions>
    </Dialog >

  );
};