import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { useLatest } from 'react-use';
import { isEqual } from "../../../lodash.js";
import { useToolbarContext } from "../../../toolbar/context.js";
import { ToolbarColors } from "../custom/ToolbarColors.js";
export const WToolbarColors = ({ disablePortal, className, editor, focus, onClick, }) => {
    const { active, enabled, currentColor } = useColorsState(editor);
    const action = editor.actions.colorify;
    return (_jsx(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 }));
};
function useColorsState(editor) {
    const action = editor.actions.colorify;
    const context = useToolbarContext();
    const [state, setState] = useState({
        active: false,
        enabled: true,
        currentColor: '',
    });
    const stateRef = useLatest(state);
    useEffect(() => {
        if (!context)
            return undefined;
        const onUpdate = () => {
            const newState = {
                active: action.isActive(),
                enabled: action.isEnable(),
                currentColor: action.meta(),
            };
            if (!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
