import { Dialog, Theme } from "@mui/material";
import { DialogProps } from "@mui/material/Dialog";
// import { TransitionProps } from "@mui/material/transitions";
import { makeStyles } from "@mui/styles";
import { useMobile } from "hooks";
// import React from "react";

const useStyles = makeStyles((theme: Theme) => ({
  bg: {
    background: theme.palette.background.default
  }
}));

// const Transition = React.forwardRef(function Transition(
//   props: TransitionProps & { children?: React.ReactElement<any, any> },
//   ref: React.Ref<unknown>
// ) {
//   return <Slide direction="up" ref={ref} {...props} />;
// });

//renders a fullscren dialog when a mobile viewport is detected
export default function ResponsiveDialog(props: DialogProps) {
  const classes = useStyles();
  const isMobile = useMobile();
  const fullScreen = props.fullScreen ?? isMobile;

  return (
    <Dialog
      fullScreen={fullScreen}
      // TransitionComponent={Transition}
      {...props}
      PaperProps={{
        classes: { root: classes.bg }
      }}>
      {props.children}
    </Dialog>
  );
}
