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