"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.WToolbarColors = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_use_1 = require("react-use");
const lodash_1 = require("../../../lodash.js");
const context_1 = require("../../../toolbar/context.js");
const ToolbarColors_1 = require("../custom/ToolbarColors.js");
const WToolbarColors = ({ disablePortal, className, editor, focus, onClick, }) => {
    const { active, enabled, currentColor } = useColorsState(editor);
    const action = editor.actions.colorify;
    return ((0, jsx_runtime_1.jsx)(ToolbarColors_1.ToolbarColors, { active: active, enable: enabled, currentColor: currentColor, exec: (color) => {
            action.run({ color: color === currentColor ? '' : color });
        }, disablePortal: disablePortal, className: className, focus: focus, onClick: onClick, withDefault: true }));
};
exports.WToolbarColors = WToolbarColors;
function useColorsState(editor) {
    const action = editor.actions.colorify;
    const context = (0, context_1.useToolbarContext)();
    const [state, setState] = (0, react_1.useState)({
        active: false,
        enabled: true,
        currentColor: '',
    });
    const stateRef = (0, react_use_1.useLatest)(state);
    (0, react_1.useEffect)(() => {
        if (!context)
            return undefined;
        const onUpdate = () => {
            const newState = {
                active: action.isActive(),
                enabled: action.isEnable(),
                currentColor: action.meta(),
            };
            if (!(0, lodash_1.isEqual)(stateRef.current, newState)) {
                setState(newState);
            }
        };
        onUpdate();
        context.eventBus.on('update', onUpdate);
        return () => {
            context.eventBus.off('update', onUpdate);
        };
    }, [action, context, stateRef]);
    return state;
}
//# sourceMappingURL=WToolbarColors.js.map
