import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { forwardRef, useImperativeHandle } from 'react';
import { createPortal } from 'react-dom';
import Typography from '../Typography/Typography.js';
import Icon from '../Icon/Icon.js';
import classNames from '../../_virtual/index.js';

const ChatModalAi = forwardRef(({ iconName, hoverTitle, iconPosition: { top: iconTop, left: iconLeft, bottom: iconBottom, right: iconRight, }, hoverIconPosition: { top: iconhoverTop, left: iconhoverLeft, bottom: iconhoverBottom, right: iconhoverRight, }, modalPosition: { top: modalTop, left: modalLeft, bottom: modalBottom, right: modalRight, }, modalWidth, modalHeight, headerContent = 'Header Content', footerContent = 'Footer Content', iconWidth, iconHeight, children, isVisible, isOpen, onOpen, onClose, isIconVisible,
// onVisibilityChange,
 }, ref) => {
    useImperativeHandle(ref, () => ({
        closeModal: onClose,
    }));
    return (jsxs(Fragment, { children: [isIconVisible && (jsxs("div", { style: {
                    top: iconTop !== undefined ? `${iconTop}px` : undefined,
                    left: iconLeft !== undefined ? `${iconLeft}px` : undefined,
                    bottom: iconBottom !== undefined ? `${iconBottom}px` : undefined,
                    right: iconRight !== undefined ? `${iconRight}px` : undefined,
                }, className: "ff-ai-dynamic-icon-container", children: [jsx(Icon, { className: "ff-ai-dynamic-icon", name: iconName, onClick: onOpen, height: iconHeight, width: iconWidth }), jsx("div", { style: {
                            top: iconhoverTop !== undefined ? `${iconhoverTop}px` : undefined,
                            left: iconhoverLeft !== undefined
                                ? `${iconhoverLeft}px`
                                : undefined,
                            bottom: iconhoverBottom !== undefined
                                ? `${iconhoverBottom}px`
                                : undefined,
                            right: iconhoverRight !== undefined
                                ? `${iconhoverRight}px`
                                : undefined,
                        }, className: "ff-ai-chat-icon-hover", children: jsx("div", { className: "ai-hover-leaf", children: jsx(Typography, { fontWeight: "bold", fontSize: 14, color: "var(--chatbot-leaf-text)", children: hoverTitle }) }) })] })), isVisible &&
                createPortal(jsx("div", { className: classNames('ff-ai-dynamic-modal', { open: isOpen }), style: {
                        top: modalTop !== undefined ? `${modalTop}px` : undefined,
                        left: modalLeft !== undefined ? `${modalLeft}px` : undefined,
                        bottom: modalBottom !== undefined ? `${modalBottom}px` : undefined,
                        right: modalRight !== undefined ? `${modalRight}px` : undefined,
                        position: 'fixed',
                        height: modalHeight,
                        width: modalWidth,
                    }, children: jsxs("div", { className: "ff-ai-dynamic-modal-content", children: [headerContent && (jsx("div", { className: "ff-ai-dynamic-modal-header", children: headerContent })), jsx("div", { className: "ff-ai-dynamic-modal-body", children: children }), footerContent && (jsx("div", { className: "ff-ai-dynamic-modal-footer", children: footerContent }))] }) }), document.body)] }));
});

export { ChatModalAi as default };
//# sourceMappingURL=ChatModalAi.js.map
