import PeopleIcon from "@mui/icons-material/People";
import AddIcon from "@mui/icons-material/Add";
import PhoneEnabledIcon from "@mui/icons-material/PhoneEnabled";
import CircleIcon from "@mui/icons-material/Circle";
import Button from "@mui/material/Button";
import Grid from "@mui/material/Grid";
import { SidebarUserObj } from "../sidebar/SidebarUser";
import CallFavouritesDialog from "./CallFavouritesDialog";
import { useState } from "react";

interface Props {
  users: SidebarUserObj[];
}

const ShortCuts: React.FC<Props> = ({ users }: Props) => {
  const [open, setOpen] = useState(false);
  const [selectedValue, setSelectedValue] = useState(users[0]);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = (value: SidebarUserObj) => {
    setOpen(false);
    setSelectedValue(value);
  };

  return (
    <div className="short-cuts" >
      <Grid className="row-1" container spacing={1}>
        <Grid item sm={6}>
          <Button className="tile">
            <PeopleIcon className="icon" />
          </Button>
          <label>New Meeting</label>
        </Grid>
        <Grid item sm={6}>
          <Button className="tile">
            <AddIcon className="icon" />
          </Button>
          <label>Join</label>
        </Grid>
      </Grid>
      <Grid className="row-2" container spacing={1}>
        <Grid item sm={6}>
          <Button className="tile" onClick={handleClickOpen}>
            <PhoneEnabledIcon className="icon" />
          </Button>
          <CallFavouritesDialog 
            selectedValue={selectedValue}
            open={open}
            onClose={handleClose}
            users={users}/>
          <label>Call Favourites</label>
        </Grid>
        <Grid item sm={6}>
          <Button className="tile">
            <CircleIcon className="icon" />
          </Button>
          <label>Recordings</label>
        </Grid>
      </Grid>
    </div>
  );
};
  
export default ShortCuts;