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 Typography from "@mui/material/Typography";
import { SidebarUserObj } from "./Home";
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>
          <Typography className="mylabel" sx={{ ml: 1 }}>
            New Meeting
          </Typography>
        </Grid>
        <Grid item sm={6}>
          <Button className="tile">
            <AddIcon className="icon" />
          </Button>
          <Typography className="mylabel" sx={{ ml: 1 }}>
            Join
          </Typography>
        </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}
          />
          <Typography className="mylabel" sx={{ ml: 1 }}>
            Call Group
          </Typography>
        </Grid>
        <Grid item sm={6}>
          <Button className="tile">
            <CircleIcon className="icon" />
          </Button>
          <Typography className="mylabel" sx={{ ml: 1 }}>
            Recordings
          </Typography>
        </Grid>
      </Grid>
    </div>
  );
};

export default ShortCuts;
