"use client";

import { FC, useState } from "react";
import {
  Grid,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  TextField,
  Autocomplete,
} from "@mui/material";
import useSWR, { 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 = "#1982FC";
  const color = "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 { data: users, error: usersError }: any = useSWR({
    url: "/api/v1/users",
    method: "GET",
  });

  console.log({ users, usersError });

  const customers =
    users?.filter((user: any) => user.role_ids.includes(3)) ?? [];
  const formattedCustomers = customers.map((customer: any) => ({
    label: customer.login,
    id: `${customer.id}`,
  }));
  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={formattedCustomers}
              value={customerID}
              sx={{ width: 300 }}
              onChange={(e: any) => setCustomerID(e.target.value.id)}
              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}
            >
              Create Ticket
            </Button>
          </Grid>
        </Grid>
      </DialogActions>
    </Dialog>
  );
};