var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx } 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 { useEffect, useMemo, useState } from "react";
import tinycolor from "tinycolor2";
import { PopupWrapper } from "../../components/popup-presenter";
import { config } from "../../utils/config";
import { SplitButton } from "../components/split-button";
import { ColorPicker, DEFAULT_COLORS } from "../popups/color-picker";
import { useToolbarLocation } from "../stores/toolbar-store";
import { getToolbarElement } from "../utils/dom";
export function ColorTool(props) {
    const { onColorChange, activeColor: _activeColor, title, cacheKey } = props, toolProps = __rest(props, ["onColorChange", "activeColor", "title", "cacheKey"]);
    const activeColor = _activeColor || config.get(cacheKey);
    const tColor = tinycolor(activeColor);
    const isBottom = useToolbarLocation() === "bottom";
    const [isOpen, setIsOpen] = useState(false);
    const [colors, setColors] = useState(config.get(`custom_${cacheKey}`, []) || []);
    const position = useMemo(() => {
        return {
            isTargetAbsolute: true,
            target: getToolbarElement(),
            align: isBottom ? "center" : "end",
            location: isBottom ? "top" : "below",
            yOffset: 10
        };
    }, [isBottom, isOpen]);
    useEffect(() => {
        config.set(`custom_${cacheKey}`, colors);
    }, [cacheKey, colors]);
    return (_jsx(SplitButton, Object.assign({}, toolProps, { iconColor: activeColor && tColor.isDark() ? "white" : "icon", sx: {
            mr: 0,
            bg: activeColor || "transparent",
            ":hover:not(:disabled):not(:active)": {
                bg: activeColor ? tColor.darken(5).toRgbString() : "transparent"
            }
        }, onOpen: () => setIsOpen((s) => !s), toggled: isOpen, onClick: () => onColorChange(activeColor), children: _jsx(PopupWrapper, { isOpen: isOpen, id: props.icon, group: "color", position: position, focusOnRender: false, blocking: false, children: _jsx(ColorPicker, { color: activeColor, editor: props.editor, colors: colors, onDelete: (color) => {
                    if (DEFAULT_COLORS.includes(color))
                        return;
                    setColors((colors) => colors.filter((item) => item !== color));
                }, onClear: () => {
                    onColorChange();
                    config.set(cacheKey, null);
                }, onSave: (color) => {
                    setColors((colors) => colors.includes(color) ? colors : [...colors, color]);
                }, cacheKey: `custom_${cacheKey}`, onChange: (color) => {
                    const currentColor = config.get(cacheKey);
                    if (currentColor && currentColor === color) {
                        onColorChange();
                        config.set(cacheKey, null);
                    }
                    else {
                        onColorChange(color);
                        config.set(cacheKey, color);
                    }
                }, onClose: () => {
                    setIsOpen(false);
                }, title: title }) }) })));
}
export function Highlight(props) {
    const { editor } = props;
    return (_jsx(ColorTool, Object.assign({}, props, { cacheKey: "highlight", activeColor: editor.getAttributes("textStyle").backgroundColor, title: "Background color", onColorChange: (color) => color
            ? editor.chain().focus().setHighlight(color).run()
            : editor.chain().focus().unsetHighlight().run() })));
}
export function TextColor(props) {
    const { editor } = props;
    return (_jsx(ColorTool, Object.assign({}, props, { cacheKey: "textColor", activeColor: editor.getAttributes("textStyle").color, title: "Text color", onColorChange: (color) => color
            ? editor.chain().focus().setColor(color).run()
            : editor.chain().focus().unsetColor().run() })));
}
