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

const ChatModal = ({ iconName, 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, modalHeading = 'Ask Fia', children, onClearChat, }) => {
    const [isOpen, setIsOpen] = useState(false);
    const [isVisible, setIsVisible] = useState(false);
    const openModal = () => {
        setIsVisible((prev) => !prev);
        setTimeout(() => setIsOpen((prev) => !prev), 10);
    };
    const closeModal = () => {
        setIsOpen(false);
        setTimeout(() => setIsVisible(false), 300);
    };
    return (jsxs(Fragment, { children: [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-dynamic-icon-container", children: [jsx(Icon, { className: `ff-dynamic-icon`, name: iconName, onClick: openModal, 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-chat-icon-hover`, children: jsx(Icon, { name: "ask_fia_icon", height: 32, width: 82 }) })] }), isVisible &&
                createPortal(jsx("div", { className: classNames('ff-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-dynamic-modal-content", children: [headerContent && (jsx("div", { className: "ff-dynamic-modal-header", children: jsxs("div", { className: "header-container", children: [jsxs("div", { className: "header-left", children: [jsx(Icon, { height: 16, width: 16, name: "fia_icon" }), jsx(Typography, { fontWeight: "medium", children: modalHeading })] }), jsxs("div", { className: "header-right", children: [jsx("span", { className: "action", children: jsx(Tooltip, { title: "Clear chat", placement: "bottom", children: jsx(Icon, { height: 16, width: 16, name: "delete", color: "var(--tooltip-text-color)", onClick: onClearChat }) }) }), jsx("span", { className: "action", children: jsx(Tooltip, { title: "Close", placement: "bottom", children: jsx(Icon, { height: 16, width: 16, name: "close", color: "var(--tooltip-text-color)", onClick: () => closeModal() }) }) })] })] }) })), jsx("div", { className: "ff-dynamic-modal-body", children: children }), footerContent && (jsx("div", { className: "ff-dynamic-modal-footer", children: footerContent }))] }) }), document.body)] }));
};

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