import { FC, useEffect } from "react";
import { Grid, Box, Typography, TextField } from "@mui/material";
import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import {
  MainContainer,
  ChatContainer,
  MessageList,
  Message,
  MessageInput,
  Conversation,
  ConversationHeader,
} from "@chatscope/chat-ui-kit-react";

interface TicketEditProps {
  ticket: any;
}

export const TicketEdit: FC<TicketEditProps> = ({ ticket }) => {
  return (
    <Box sx={{ height: "100vh", background: "#ddd", p: 2 }}>
      <Grid container direction="column" spacing={3}>
        <Grid item>
          <TextField
            label="Group"
            size="small"
            sx={{
              width: "100%",
              fieldset: { backgroundColor: "white" },
            }}
          />
        </Grid>
        <Grid item>
          <TextField
            label="Owner"
            size="small"
            sx={{
              width: "100%",
              fieldset: { backgroundColor: "white" },
            }}
          />
        </Grid>
        <Grid item>
          <TextField
            label="State"
            size="small"
            sx={{
              width: "100%",
              fieldset: { backgroundColor: "white" },
            }}
          />
        </Grid>
        <Grid item>
          <TextField
            label="Priority"
            size="small"
            sx={{
              width: "100%",
              fieldset: { backgroundColor: "white" },
            }}
          />
        </Grid>
        <Grid item>
          <TextField
            label="Tags"
            size="small"
            sx={{
              width: "100%",
              fieldset: { backgroundColor: "white" },
            }}
          />
        </Grid>
      </Grid>
    </Box>
  );
};