import React, { ReactNode } from "react";
import {Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, CircularProgress} from "@mui/material";
import { Close as CloseIcon } from "@mui/icons-material";

interface CustomDialogProps {
    open: boolean;
    onClose: () => void;
    title: string;
    children?: ReactNode;
    onConfirm?: () => void;
    confirmText?: string;
    cancelText?: string;
    showTitle?: boolean;
    showContent?: boolean;
    showActions?: boolean;
    dialogSize?: "xs" | "sm" | "md" | "lg" | "xl";
    disabledCloseButtons?: boolean;
}

const CustomDialog = ({
                          open,
                          onClose,
                          title,
                          children,
                          onConfirm,
                          confirmText,
                          cancelText,
                          showTitle = true,
                          showContent = true,
                          showActions = true,
                          dialogSize = "sm",
                          disabledCloseButtons = false,
                      }: CustomDialogProps) => {
    return (
        <Dialog
            open={open}
            onClose={onClose}
            maxWidth={dialogSize}
            fullWidth
            aria-labelledby="custom-dialog-title"
        >
            {showTitle && (
                <DialogTitle
                    id="custom-dialog-title"
                    sx={{
                        bgcolor: "primary.main",
                        color: "white",
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "center",
                    }}
                >
                    <span>{title}</span>
                    <IconButton onClick={onClose} sx={{ color: "white" }} aria-label="Close">
                        <CloseIcon />
                    </IconButton>
                </DialogTitle>
            )}

            {showContent && (
                <DialogContent
                    dividers
                    tabIndex={0}
                    role="region"
                    aria-label={`${title} content`}
                    sx={{
                        minHeight: "150px",
                        maxHeight: "60vh",
                        overflow: "auto",
                        outline: "none"
                    }}
                >
                    {children}
                </DialogContent>
            )}

            {showActions && (
                <DialogActions>
                    {cancelText && (
                        <Button onClick={onClose} color="secondary" aria-label={cancelText} disabled={disabledCloseButtons}>
                            {cancelText}
                        </Button>
                    )}
                    {confirmText && (
                        <Button onClick={onConfirm} color="primary" autoFocus aria-label={confirmText} disabled={disabledCloseButtons}>
                            {disabledCloseButtons && <CircularProgress size={20} color="inherit"/>}{confirmText}
                        </Button>
                    )}
                </DialogActions>
            )}
        </Dialog>
    );
};

export default CustomDialog;
