import PeopleIcon from "@mui/icons-material/People";
import PhoneEnabledIcon from "@mui/icons-material/PhoneEnabled";
import Button from "@mui/material/Button";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import CallFavouritesDialog from "./CallFavouritesDialog";
import ScheduleMeetingDialog from "./ScheduleMeetingDialog";
import { useState } from "react";

const ShortCuts: React.FC = () => {
  const [openScheduleMeeting, setOpenScheduleMeeting] = useState(false);
  const [openCallGroup, setOpenCallGroup] = useState(false);

  const handleClickOpenCallGroup = () => {
    setOpenCallGroup(true);
  };

  const handleCloseCallGroup = () => {
    setOpenCallGroup(false);
  };

  const handleClickOpenScheduleMeeting = () => {
    setOpenScheduleMeeting(true);
  };

  const handleCloseScheduleMeeting = () => {
    setOpenScheduleMeeting(false);
  };

  return (
    <div className="short-cuts">
      <Grid className="row-1" container spacing={1}>
        <Grid item sm={6}>
          <Button className="tile" onClick={handleClickOpenScheduleMeeting}>
            <PeopleIcon className="icon" />
          </Button>
          <ScheduleMeetingDialog
            open={openScheduleMeeting}
            handleClose={handleCloseScheduleMeeting}
          />
          <Typography variant="h6" className="mylabel" sx={{ ml: 1 }}>
            Schedule Meeting
          </Typography>
        </Grid>
        <Grid item sm={6}>
          <Button className="tile" onClick={handleClickOpenCallGroup}>
            <PhoneEnabledIcon className="icon" />
          </Button>
          <CallFavouritesDialog
            open={openCallGroup}
            handleClose={handleCloseCallGroup}
          />
          <Typography variant="h6" className="mylabel" sx={{ ml: 1 }}>
            Call Group
          </Typography>
        </Grid>
      </Grid>
      {/* <Grid className="row-2" container spacing={1}>
        <Grid item sm={6}>
          <Button className="tile">
            <AddIcon className="icon" />
          </Button>
          <Typography className="mylabel" sx={{ ml: 1 }}>
            Join
          </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;