import * as React from "react";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import Slide from "@mui/material/Slide";
import { PropTypes } from "prop-types";
import { Checkbox, Typography } from "@mui/material";
import { Grid } from "../grid/Grid";
import { SPACING } from "../../data/spacing";

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});

export function DialogAlert({ title, content, actions, btnTitle, isAccepted }) {
  const [open, setOpen] = React.useState(false);

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

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Grid container onClick={handleClickOpen}>
        <Grid display="flex" alignItems="center" gap={SPACING.TINY}>
          <Checkbox
            sx={{ padding: "0px" }}
            checked={isAccepted}
            color="success"
          />
          <Typography
            style={{ cursor: "pointer" }}
            borderBottom={"1px solid"}
            color="primary"
          >
            {btnTitle}
          </Typography>
        </Grid>
      </Grid>

      <Dialog
        open={open}
        TransitionComponent={Transition}
        keepMounted
        onClose={handleClose}
        aria-describedby="alert-dialog-slide-description"
      >
        <DialogTitle>{title}</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-slide-description">
            {content}
          </DialogContentText>
        </DialogContent>
        <DialogActions onClick={handleClose}>{actions}</DialogActions>
      </Dialog>
    </div>
  );
}

DialogAlert.propTypes = {
  title: PropTypes.string,
  content: PropTypes.string,
  btnTitle: PropTypes.string,
  isAccepted: PropTypes.bool,
  actions: PropTypes.array,
};
