import {
  Collapse,
  Divider,
  Drawer,
  List,
  ListItem,
  ListItemButton,
  ListItemText,
  TextField,
  Toolbar,
} from "@mui/material";
import React from "react";
import { ExpandLess, ExpandMore } from "@mui/icons-material";
import ContactItem from "./sidebar-components/ContactItem";
import { useAppSelector } from "../../../redux/hooks";
import { selectUsers, selectTeam } from "../../../redux/slices/usersSlice";
import { selectFavorites } from "../../../redux/slices/favoritesSlice";

const sidebarWidth = 240;

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

  const favoritesUuids = useAppSelector(selectFavorites);
  const favorites = useAppSelector((state) =>
    selectUsers(state, favoritesUuids)
  );
  const filteredFavorites = favorites.filter((favorite) =>
    favorite.name.toLowerCase().includes(inputText.toLowerCase())
  );

  const teamUuids = useAppSelector(selectTeam);
  const team = useAppSelector((state) => selectUsers(state, teamUuids));
  const filteredTeam = team.filter((member) =>
    member.name.toLowerCase().includes(inputText.toLowerCase())
  );

  return (
    <Drawer
      variant="permanent"
      sx={{
        width: sidebarWidth,
        ["& .MuiDrawer-paper"]: { width: sidebarWidth },
      }}
    >
      <Toolbar />
      <List>
        <ListItemText
          primary="Contacts"
          primaryTypographyProps={{ variant: "h6" }}
          sx={{ textAlign: "center" }}
        />
        <ListItem>
          <TextField
            label="Search Contacts"
            variant="outlined"
            placeholder="Person"
            onChange={(e) => {
              setInputText(e.target.value);
            }}
          />
        </ListItem>

        <Divider />
        <ListItemButton onClick={() => setFavoritesOpen(!favoritesOpen)}>
          {favoritesOpen ? <ExpandLess /> : <ExpandMore />}
          <ListItemText primary="Favorites" sx={{ textAlign: "center" }} />
          <ListItemText
            primary={filteredFavorites.length}
            sx={{ textAlign: "right" }}
          />
        </ListItemButton>
        <Collapse in={favoritesOpen} timeout="auto" unmountOnExit>
          <List disablePadding>
            {filteredFavorites.map((favorite, i) => (
              <ContactItem contactInfo={favorite} key={i} />
            ))}
          </List>
        </Collapse>
        <ListItemButton onClick={() => setTeamOpen(!teamOpen)}>
          {teamOpen ? <ExpandLess /> : <ExpandMore />}
          <ListItemText primary="Team" sx={{ textAlign: "center" }} />
          <ListItemText
            primary={filteredTeam.length}
            sx={{ textAlign: "right" }}
          />
        </ListItemButton>
        <Collapse in={teamOpen} timeout="auto" unmountOnExit>
          <List disablePadding>
            {filteredTeam.map((member, i) => (
              <ContactItem contactInfo={member} key={i} />
            ))}
          </List>
        </Collapse>
      </List>
    </Drawer>
  );
};

export default Sidebar;