"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const styles_1 = require("@mui/material/styles");
const Dialog_1 = tslib_1.__importDefault(require("@mui/material/Dialog"));
const DialogActions_1 = tslib_1.__importDefault(require("@mui/material/DialogActions"));
const DialogContent_1 = tslib_1.__importDefault(require("@mui/material/DialogContent"));
const useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const material_1 = require("@mui/material");
const DialogTitle_1 = tslib_1.__importDefault(require("@mui/material/DialogTitle"));
const IconButton_1 = tslib_1.__importDefault(require("@mui/material/IconButton"));
const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
const utils_1 = require("@selfcommunity/utils");
const PREFIX = 'SCBaseDialog';
const classes = {
    root: `${PREFIX}-root`,
    titleRoot: `${PREFIX}-title-root`
};
const DialogTitleRoot = (0, styles_1.styled)(DialogTitle_1.default, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.titleRoot
})(({ theme }) => ({}));
const DialogTitle = ({ children = null, onClose = null }) => {
    const theme = (0, material_1.useTheme)();
    const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'), { noSsr: (0, utils_1.isClientSideRendering)() });
    return ((0, jsx_runtime_1.jsxs)(DialogTitleRoot, Object.assign({ className: classes.titleRoot }, { children: [(0, jsx_runtime_1.jsx)("span", { children: children }), onClose ? ((0, jsx_runtime_1.jsx)(IconButton_1.default, Object.assign({ "aria-label": "close", onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: isMobile ? 'arrow_back' : 'close' }) }))) : null] })));
};
const Root = (0, styles_1.styled)(Dialog_1.default, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.root
})(({ theme }) => ({}));
function BaseDialog(props) {
    // OPTIONS
    const theme = (0, material_1.useTheme)();
    const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'), { noSsr: (0, utils_1.isClientSideRendering)() });
    const fullScreen = isMobile;
    // PROPS
    const { className = '', title = '', subtitle = null, DialogContentProps = { dividers: !isMobile }, open = false, onClose = null, actions = null, children, maxWidth = 'sm', scroll = 'body' } = props, rest = tslib_1.__rest(props, ["className", "title", "subtitle", "DialogContentProps", "open", "onClose", "actions", "children", "maxWidth", "scroll"]);
    /**
     * Renders root object
     */
    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), fullScreen: fullScreen, fullWidth: true, open: open, onClose: onClose, maxWidth: maxWidth, scroll: scroll }, rest, { children: [(0, jsx_runtime_1.jsx)(DialogTitle, Object.assign({ onClose: onClose }, { children: title })), subtitle && subtitle, (0, jsx_runtime_1.jsx)(DialogContent_1.default, Object.assign({}, DialogContentProps, { children: children })), actions && (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: actions })] })));
}
exports.default = BaseDialog;
