import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
This file is part of the Notesnook project (https://notesnook.com/)

Copyright (C) 2023 Streetwriters (Private) Limited

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
import { EmotionThemeProvider } from "@notesnook/theme";
import { Icon } from "@notesnook/ui";
import { Button, Flex, Text } from "@theme-ui/components";
import { DesktopOnly, MobileOnly } from "../../components/responsive";
import { Icons } from "../icons";
export function Popup(props) {
    const { title, onClose, action, children } = props;
    return (_jsxs(EmotionThemeProvider, { scope: "editorToolbar", children: [_jsx(DesktopOnly, { children: _jsxs(Flex, { sx: {
                        overflow: "hidden",
                        bg: "background",
                        flexDirection: "column",
                        borderRadius: "default",
                        // border: "1px solid var(--border)",
                        boxShadow: "menu",
                        minWidth: 200
                    }, children: [title && (_jsxs(Flex, { className: "movable", sx: {
                                justifyContent: "space-between",
                                alignItems: "center",
                                p: 2
                            }, children: [_jsx(Text, { variant: "title", children: title }), _jsx(Button, { variant: "secondary", sx: { p: 0, bg: "transparent" }, onClick: onClose, children: _jsx(Icon, { path: Icons.close, size: "big" }) })] })), children, title && action && (_jsx(Flex, { sx: { justifyContent: "end" }, bg: "var(--background-secondary)", p: 1, px: 2, mt: 2, children: _jsx(Button, { variant: "dialog", onClick: action.disabled || action.loading ? undefined : action.onClick, disabled: action.disabled || action.loading, children: action.loading ? (_jsx(Icon, { path: Icons.loading, rotate: true, size: "medium" })) : (action.title) }) }))] }) }), _jsxs(MobileOnly, { children: [children, action && (_jsx(Button, { variant: "accent", sx: {
                            alignSelf: "stretch",
                            mb: 1,
                            mt: 2,
                            mx: 1,
                            py: 2
                        }, onClick: action.disabled ? undefined : action === null || action === void 0 ? void 0 : action.onClick, disabled: action.disabled, children: action.loading ? (_jsx(Icon, { path: Icons.loading, rotate: true, size: "medium" })) : (action.title) }))] })] }));
}
