import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box } from "@theme-ui/components";
import { Tab, Tabs } from "../../components/tabs";
import { Icon } from "@notesnook/ui";
// import { MenuPresenter } from "../../components/menu/menu";
import { Popup } from "../components/popup";
import { Icons } from "../icons";
import { ColorPicker } from "./color-picker";
export function CellProperties(props) {
    const { editor, onClose } = props;
    const attributes = editor.getAttributes("tableCell");
    return (_jsx(Popup, { title: "Cell properties", onClose: onClose, children: _jsxs(Tabs, { activeIndex: 0, children: [_jsxs(Tab, { title: _jsx(Icon, { title: "Cell background color", path: Icons.backgroundColor, size: 16 }), children: [_jsx(Box, { mt: 2 }), _jsx(ColorPicker, { editor: editor, expanded: true, color: attributes.backgroundColor, onChange: (color) => editor.commands.setCellAttribute("backgroundColor", color), onClear: () => editor.commands.setCellAttribute("backgroundColor", undefined) })] }), _jsxs(Tab, { title: _jsx(Icon, { title: "Cell text color", path: Icons.textColor, size: 16 }), children: [_jsx(Box, { mt: 2 }), _jsx(ColorPicker, { editor: editor, expanded: true, color: attributes.color, onChange: (color) => editor.commands.setCellAttribute("color", color), onClear: () => editor.commands.setCellAttribute("color", undefined) })] }), _jsxs(Tab, { title: _jsx(Icon, { title: "Cell border color", path: Icons.cellBorderColor, size: 16 }), children: [_jsx(Box, { mt: 2 }), _jsx(ColorPicker, { editor: editor, expanded: true, color: attributes.borderColor, onChange: (color) => editor.commands.setCellAttribute("borderColor", color), onClear: () => editor.commands.setCellAttribute("borderColor", undefined) })] })] }) }));
}
