import { useThematic } from '@thematic/react';
import merge from 'lodash-es/merge.js';
import { useCallback, useMemo } from 'react';
/**
 * This hook just centralizes default command item styling for the header
 * @param commands -
 * @returns
 */ export function useCommands(commands = [], background, color) {
    return useMemo(()=>{
        return commands.map((command)=>merge({
                iconProps: {
                    styles: {
                        root: {
                            color
                        }
                    }
                },
                buttonStyles: {
                    root: {
                        background,
                        color
                    },
                    menuIcon: {
                        color
                    }
                }
            }, command));
    }, [
        commands,
        background,
        color
    ]);
}
export function useColorDefaults(color, bgColor) {
    const theme = useThematic();
    return useMemo(()=>({
            background: bgColor || theme.application().background().hex(),
            foreground: color || theme.application().foreground().hex()
        }), [
        theme,
        bgColor,
        color
    ]);
}
export function useHandleOnDataReduce(color) {
    const iconProps = useIconProps(color);
    return useCallback((item)=>{
        item.iconProps = iconProps(item);
        item.text = item.text || item.title || '';
    }, [
        iconProps
    ]);
}
export function useHandleOnDataGrown(color) {
    const iconProps = useIconProps(color);
    return useCallback((item)=>{
        item.iconProps = iconProps(item);
    }, [
        iconProps
    ]);
}
export function useOverflowButtonProps(background, color) {
    return useMemo(()=>({
            styles: {
                root: {
                    background
                },
                menuIcon: {
                    color: color
                }
            }
        }), [
        background,
        color
    ]);
}
function useIconProps(color) {
    return useCallback((item)=>({
            styles: {
                root: {
                    color
                }
            },
            ...item.iconProps
        }), [
        color
    ]);
}
export function useCommandStyles(styles) {
    return useMemo(()=>merge({
            root: {
                width: '100%',
                background: 'none',
                padding: 0
            }
        }, styles), [
        styles
    ]);
}
