import { FC, useEffect, useState } from "react";
import { Grid, Box, Typography, TextField, Stack, Chip, Select, MenuItem } from "@mui/material";
import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";

interface TicketEditProps {
  ticket: any;
}

export const TicketEdit: FC<TicketEditProps> = ({ ticket }) => {
  const [selectedGroup, setSelectedGroup] = useState("group1");
  const [selectedOwner, setSelectedOwner] = useState("owner1");
  const [selectedPriority, setSelectedPriority] = useState("priority1");
  const [selectedState, setSelectedState] = useState("state2");
  const handleDelete = () => {
    console.info("You clicked the delete icon.");
  };

  return (
    <Box sx={{ height: "100vh", background: "#ddd", p: 2 }}>
      <Grid container direction="column" spacing={3}>
        <Grid item>
          <Box sx={{ m: 1 }}>Group</Box>
          <Select defaultValue={selectedGroup} value={selectedGroup} onChange={(e: any) => setSelectedGroup(e.target.value)} size="small" sx={{
            width: "100%",
            backgroundColor: "white"
          }} >
            <MenuItem key="group1" value="group1">Default Group</MenuItem>
          </Select>
        </Grid>
        <Grid item>
          <Box sx={{ m: 1, mt: 0 }}>Owner</Box>
          <Select value={selectedOwner} onChange={(e: any) => setSelectedOwner(e.target.value)} size="small" sx={{
            width: "100%",
            backgroundColor: "white",
          }} >
            <MenuItem value="owner1">Darren Clarke</MenuItem>
            <MenuItem value="owner2">Darren Gpcmdln</MenuItem>
          </Select>
        </Grid>
        <Grid item>
          <Box sx={{ m: 1, mt: 0 }}>State</Box>
          <Select value={selectedState} onChange={(e: any) => setSelectedState(e.target.value)} size="small" sx={{
            width: "100%",
            backgroundColor: "white"
          }} >
            <MenuItem value="state1">closed</MenuItem>
            <MenuItem value="state2">new</MenuItem>
            <MenuItem value="state3">open</MenuItem>
            <MenuItem value="state4">pending close</MenuItem>
            <MenuItem value="state4">pending reminder</MenuItem>
          </Select>
        </Grid>
        <Grid item>
          <Box sx={{ m: 1, mt: 0 }}>Priority</Box>
          <Select value={selectedPriority} onChange={(e: any) => setSelectedPriority(e.target.value)} size="small" sx={{
            width: "100%",
            backgroundColor: "white"
          }} >
            <MenuItem value="priority1">1 low</MenuItem>
            <MenuItem value="priority2">2 normal</MenuItem>
            <MenuItem value="priority3">3 high</MenuItem>
          </Select>
        </Grid>

        <Grid item>
          <Box sx={{ mb: 1, }}>Tags</Box>
          <Stack direction="row" spacing={1} sx={{ backgroundColor: "white", p: 1, borderRadius: "6px", border: "1px solid #bbb", minHeight: 120 }} flexWrap="wrap">
            <Chip label="First" onDelete={handleDelete} />
            <Chip label="Another" onDelete={handleDelete} />
          </Stack>
        </Grid>
      </Grid>
    </Box >
  );
};