import {
  Button,
  Checkbox,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControlLabel,
  FormGroup,
  Typography,
} from "@mui/material";
import { SidebarUserObj } from "./Home";

interface Props {
  open: boolean;
  selectedValue: SidebarUserObj;
  onClose: (value: SidebarUserObj) => void;
  users: SidebarUserObj[];
}

const CallFavouritesDialog: React.FC<Props> = ({
  open,
  selectedValue,
  onClose,
  users,
}: Props) => {
  const handleClose = () => {
    onClose(selectedValue);
  };

  return (
    <Dialog onClose={handleClose} open={open} fullWidth maxWidth="sm">
      <DialogTitle>Select who to call:</DialogTitle>
      <DialogContent>
        <FormControlLabel
          control={<Checkbox color="success" />}
          label="Select everyone"
        />
      </DialogContent>
      <DialogContent sx={{ height: "40vh" }} dividers>
        <FormGroup>
          {users.map((user) => (
            <FormControlLabel
              key={user.id}
              control={<Checkbox color="success" />}
              label={user.name}
            />
          ))}
        </FormGroup>
      </DialogContent>

      <DialogActions>
        <Button color="success" onClick={handleClose}>
          <Typography variant="button" color="black">
            Call
          </Typography>
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default CallFavouritesDialog;