import {
  Collapse,
  Divider,
  Drawer,
  List,
  ListItemButton,
  ListItemText,
  Toolbar,
} from "@mui/material";
import React from "react";
import { ExpandLess, ExpandMore } from "@mui/icons-material";
import ContactInfo from "../ContactInfo";
import Status from "../Status";
import ContactItem from "./sidebar-components/ContactItem";

const contacts: ContactInfo[] = [
  { name: "Taehee ...", status: Status.Online },
  { name: "Jincheng ...", status: Status.Offline },
  { name: "Mathew ...", status: Status.InMeeting },
  { name: "Esteban ...", status: Status.Away },
];

interface Props {
  setContactSelected: (contactInfo: ContactInfo) => void;
}

const sidebarWidth = 240;

const Sidebar: React.FC<Props> = (props) => {
  const [favoritesOpen, setFavoritesOpen] = React.useState<boolean>(true);
  const [teamOpen, setTeamOpen] = React.useState<boolean>(false);

  return (
    <Drawer
      variant="permanent"
      sx={{
        width: sidebarWidth,
        ["& .MuiDrawer-paper"]: { width: sidebarWidth },
      }}
    >
      <Toolbar />
      <List>
        <ListItemText
          primary="Contacts"
          primaryTypographyProps={{ variant: "h6" }}
          sx={{ textAlign: "center" }}
        />
        <Divider />
        <ListItemButton onClick={() => setFavoritesOpen(!favoritesOpen)}>
          {favoritesOpen ? <ExpandLess /> : <ExpandMore />}
          <ListItemText primary="Favorites" sx={{ textAlign: "center" }} />
          <ListItemText primary="10" sx={{ textAlign: "right" }} />
        </ListItemButton>
        <Collapse in={favoritesOpen} timeout="auto" unmountOnExit>
          <List disablePadding>
            {contacts.map((contact, i) => (
              <ContactItem
                contactInfo={contact}
                key={i}
                setContactSelected={props.setContactSelected}
              />
            ))}
          </List>
        </Collapse>
        <ListItemButton onClick={() => setTeamOpen(!teamOpen)}>
          {teamOpen ? <ExpandLess /> : <ExpandMore />}
          <ListItemText primary="Team" sx={{ textAlign: "center" }} />
          <ListItemText primary="10" sx={{ textAlign: "right" }} />
        </ListItemButton>
        <Collapse in={teamOpen} timeout="auto" unmountOnExit>
          <List disablePadding>
            {contacts.map((contact, i) => (
              <ContactItem
                contactInfo={contact}
                key={i}
                setContactSelected={props.setContactSelected}
              />
            ))}
          </List>
        </Collapse>
      </List>
    </Drawer>
  );
};

export default Sidebar;