import React, { useEffect } from 'react';
import { st, classes } from './FloatingHelperContent.st.css.js';
import { floatingHelperSkin } from '../constants';
import { dataHooks, actionButtonSkin } from './constants';
import Text from '../../Text';
import Button from '../../Button';
import { SKINS as ButtonSkin, PRIORITY as ButtonPriority, } from '../../Button/constants';
import deprecationLog from '../../utils/deprecationLog';
const skinToButtonProps = {
    [actionButtonSkin.white]: {
        skin: ButtonSkin.light,
        priority: ButtonPriority.secondary,
    },
    [actionButtonSkin.standard]: {
        skin: ButtonSkin.standard,
        priority: ButtonPriority.secondary,
    },
    [actionButtonSkin.premium]: {
        skin: ButtonSkin.premium,
        priority: ButtonPriority.primary,
    },
    [actionButtonSkin.standardPrimary]: {
        skin: ButtonSkin.standard,
        priority: ButtonPriority.primary,
    },
    [actionButtonSkin.lightPrimary]: {
        skin: ButtonSkin.light,
        priority: ButtonPriority.primary,
    },
};
/** FloatingHelperContent */
const FloatingHelperContent = ({ title, body, actionText, onActionClick, actionTheme = 'white', // TODO: add default to actionSkin prop once actionTheme is removed
image, appearance = 'dark', // TODO: add default to skin prop once appearance is removed
footer, direction = 'horizontal', ...props }) => {
    const skin = props.skin || appearance;
    const actionSkin = props.actionSkin || actionTheme;
    useEffect(() => {
        if (appearance) {
            deprecationLog('<FloatingHelperContent/> - prop "appearance" is deprecated and will be removed in next major release, please use "skin" property instead.');
        }
    }, [appearance]);
    useEffect(() => {
        if (actionTheme) {
            deprecationLog('<FloatingHelperContent/> - prop "actionTheme" is deprecated and will be removed in next major release, please use "actionSkin" property instead.');
        }
    }, [actionTheme]);
    return (React.createElement("div", { className: st(classes.root, { hasBody: !!body, direction }), "data-direction": direction },
        React.createElement("div", null,
            title && (React.createElement("div", { className: classes.title },
                React.createElement(Text, { dataHook: dataHooks.title, weight: "bold", light: skin === floatingHelperSkin.dark }, title))),
            body && (React.createElement("div", null,
                React.createElement(Text, { dataHook: dataHooks.body, light: skin === floatingHelperSkin.dark }, body))),
            actionText && onActionClick && actionText.length > 0 && (React.createElement("div", { className: classes.action },
                React.createElement(Button, { ...skinToButtonProps[actionSkin], dataHook: dataHooks.actionButton, onClick: onActionClick, size: "small" }, actionText))),
            footer && (React.createElement("div", { "data-hook": dataHooks.footer, className: classes.footer }, footer))),
        image && direction && (React.createElement("div", { "data-hook": dataHooks.image, className: st(classes.image, { direction }) }, image))));
};
FloatingHelperContent.displayName = 'FloatingHelperContent';
export default FloatingHelperContent;
//# sourceMappingURL=FloatingHelperContent.js.map