import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { forwardRef, useImperativeHandle } from 'react';
import './ChatModalAi.scss';
import { createPortal } from 'react-dom';
import Typography from '../Typography';
import Icon from '../Icon';
import classNames from 'classnames';
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 default ChatModalAi;
//# sourceMappingURL=ChatModalAi.js.map