import { ChevronRight } from "@mui/icons-material";
import { Avatar, Box, Divider, 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";
import { useEffect, useState } from "react";
import { useTeamAPI } from "providers";
import { openCrispChat } from './CrispChat';
import RobotIcon from "products/CommonIcons/robotIcon";

const useStyles = makeStyles<Theme>((theme: Theme) => ({
  chatDrawer: {
    display: "flex",
    flexDirection: "column",
    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: "100vh",
    width: "100%",
    display: "flex",          
    flexDirection: "column",  
  },
  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();
  const teamAPI = useTeamAPI();

  const [selectedTeam, setSelectedTeam] = useState<Team>(team);
  const [teams, setTeams] = useState<pond.Team[]>([])

  useEffect(() => {
    teamAPI.listTeams(10, 0, "desc", "name", undefined, false, undefined).then(resp => {
      setTeams(resp.data.teams)
    })
  }, [teamAPI])

  const openCrisp = () => {
    openCrispChat()
    onClose()
  }

  return (
    <Drawer
      open={open}
      onClose={onClose}
      anchor="right"
      slotProps={{
        paper: {
          sx: isMobile ? { width: "100%" } : undefined,
        },
      }}
    >
      <Box display="flex" flexDirection="row" height="100%">
        {/* Side icon column */}
        <Box
          display="flex"
          flexDirection="column"
          alignItems="center"
          padding={1}
          gap={1}
          sx={(theme: Theme) => ({
            backgroundColor: theme.palette.background.paper,
            borderRight: `1px solid ${theme.palette.divider}`,
          })}
        >
          <IconButton
            onClick={() => setSelectedTeam(team)}
            sx={{
              border: selectedTeam.settings?.key === team.settings.key ? "1px solid white" : "1px solid transparent",
              borderRadius: "50%",
            }}
          >
            <Avatar src={team.settings.avatar} />
          </IconButton>
          <IconButton
            onClick={openCrisp}
          >
            <RobotIcon />
          </IconButton>
          <Box width={"100%"} borderBottom={"1px solid grey"} />
          {teams.map((t, i)=> {
            if (t.settings?.key === team.key()) return null;
            return (
              <IconButton
                onClick={() => setSelectedTeam(Team.create(t))}
                sx={{
                  border: selectedTeam.key() === t.settings?.key ? "1px solid white" : "1px solid transparent",
                  borderRadius: "50%",
                }}
                key={"chat-team-"+i}
              >
                <Avatar src={t.settings?.avatar} />
              </IconButton>
            )
          })}
        </Box>

        {/* Main chat area */}
        <Box className={isMobile ? classes.chatDrawerMobile : classes.chatDrawer}>
          <Box className={classes.drawerHeader}>
            <IconButton onClick={onClose}>
              <ChevronRight />
            </IconButton>
            <Typography>{selectedTeam.name()} Chat</Typography>
          </Box>
          <Box className={classes.chatContainer}>
            <Chat objectKey={selectedTeam.key()} type={pond.NoteType.NOTE_TYPE_TEAM} />
          </Box>
        </Box>
      </Box>
    </Drawer>
  );
}