import { ChevronRight } from "@mui/icons-material";
import { Box, Drawer, IconButton, Theme, Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import { useMobile } from "hooks";
import { Team } from "models";
import Chat from "./Chat";
import { pond } from "protobuf-ts/pond";

const useStyles = makeStyles((theme: Theme) => {
  return ({
    chatDrawer: {
      display: "flex",
      flexDirection: "column", // Arrange children vertically
      backgroundColor: theme.palette.background.default,
      height: "100%",
      maxHeight: "100%",
      minHeight: "100%",
      minWidth: theme.spacing(54),
      maxWidth: theme.spacing(54),
    },
    chatContainer: {
      flex: 1, 
      overflow: "hidden", 
    },
    chatDrawerMobile: {
      backgroundColor: theme.palette.background.default,
      height: "auto",
      width: "100%"
    },
    drawerHeader: {
      display: "flex",
      alignItems: "center",
      padding: theme.spacing(1),
      ...theme.mixins.toolbar,
      justifyContent: "flex-start"
    }
  });
});

interface Props {
  open: boolean;
  onClose: () => void;
  team: Team;
}

export function ChatDrawer(props: Props) {
  const { open, onClose, team } = props;
  const isMobile = useMobile();
  const classes = useStyles()

  return (
    <Drawer open={open} onClose={onClose} anchor="right" >
      <Box className={isMobile ? classes.chatDrawerMobile : classes.chatDrawer}>
        <Box className={classes.drawerHeader}>
          <IconButton onClick={onClose}>
            <ChevronRight />
          </IconButton>
          <Typography>{team.name()} Chat</Typography>
        </Box>
        <Box className={classes.chatContainer}>
          <Chat objectKey={team.settings.key} type={pond.NoteType.NOTE_TYPE_TEAM}/>
        </Box>
      </Box>
    </Drawer>
  )
}