import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { createPortal } from 'react-dom';
import Button from '../Button/Button.js';
import classNames from 'classnames';
import './Drawer.scss';
import { useContext, useEffect, useRef, useState } from 'react';
import Icon from '../Icon';
import useEscapeKey from '../../hooks/keyboardevents/useEscKeyEvent.js';
import { ThemeContext } from '../ThemeProvider/ThemeProvider.js';
import Tooltip from '../Tooltip/Tooltip.js';
import useClickOutside from '../../hooks/useClickOutside.js';
import { cleanAllTooltips } from './../../utils/cleanAllTooltips/cleanAllTooltips';
const Drawer = ({ isOpen = true, children = 'Drawer content area', onClose = () => { }, onBackButtonClick = () => { }, title = 'drawer', primaryButtonProps = {}, secondaryButtonProps = {}, leftPrimaryButtonProps = {}, leftSecondaryButtonProps = {}, showEditButton = false, showTransition = true, onEdit = () => { }, onCollapse = () => { }, overlay = false, isFooterRequired = true, footerContent = null, size = 'medium', _isExpanded = false, isBackButtonVisible = false, _isCloseModalButtonVisible = true, showHeader = true, isScrollBar = true, backButtonIcon, onCloseIconClick, customHeader, customFooter, leftTertiaryButtonProps = {}, rightTertiaryButtonProps = {}, zIndex, top = '89px', height, width, right = '5px', overflow, isClickOutside, ignoreRefs, noHeaderBorder = false, direction = 'right', }) => {
    const containerRef = useRef(null);
    useClickOutside(containerRef, () => {
        cleanAllTooltips();
        const openDrawers = document.querySelectorAll('.ff-drawer');
        const lastDrawer = openDrawers[openDrawers.length - 1];
        if (lastDrawer &&
            lastDrawer.contains(containerRef.current) &&
            isClickOutside) {
            onClose();
        }
    }, ignoreRefs, { ignoreSelectors: ['[data-tippy-root]'] });
    const [isExpanded, setIsExpanded] = useState(false);
    const [delayedOpen, setDelayedOpen] = useState(false);
    // useKeyboardActions([{ key: 'Escape', action: onClose }]);
    const handelClose = useEscapeKey('Escape');
    handelClose(() => {
        cleanAllTooltips();
        onClose();
    });
    const toggleExpand = () => {
        setIsExpanded((prev) => {
            onCollapse(!prev);
            return !prev;
        });
    };
    const onCancel = () => {
        if (secondaryButtonProps.onClick) {
            secondaryButtonProps.onClick();
        }
        else {
            onClose();
        }
    };
    useEffect(() => {
        closeModal();
    }, [isOpen]);
    const closeModal = () => {
        if (!isOpen) {
            setTimeout(() => {
                return null;
            }, 1000);
        }
    };
    useEffect(() => {
        if (isOpen) {
            cleanAllTooltips();
            setTimeout(() => setDelayedOpen(true), 200);
        }
        else {
            setDelayedOpen(false);
        }
    }, [isOpen]);
    useEffect(() => {
        const handleKeyDown = (e) => {
            if (e.key === 'Enter' &&
                isOpen &&
                primaryButtonProps?.onClick &&
                !primaryButtonProps.disabled) {
                const activeElement = document.activeElement;
                const isSpecialInput = ['ff-add-module-input', 'ff-search-input'].some((className) => activeElement?.classList?.contains(className) ||
                    activeElement?.closest(`.${className}`));
                if (isSpecialInput) {
                    return;
                }
                primaryButtonProps.onClick();
            }
        };
        document.addEventListener('keydown', handleKeyDown);
        return () => {
            document.removeEventListener('keydown', handleKeyDown);
        };
    }, [isOpen, primaryButtonProps]);
    const drawerSize = isExpanded ? 'x-large' : size;
    const themeContext = useContext(ThemeContext);
    const currentTheme = themeContext?.currentTheme;
    const transitionDuration = !showTransition ? '0s' : '0.4s';
    const getDefaultZIndex = (size) => {
        const zIndexMap = {
            small: 1100,
            medium: 1050,
            large: 1000,
            'x-large': 950,
        };
        return zIndexMap[size] ?? 1050;
    };
    const computedZIndex = zIndex ?? getDefaultZIndex(size);
    return createPortal(_jsxs("div", { className: classNames('ff-drawer-container', currentTheme), children: [overlay && (_jsx("div", { className: 'ff-overlay', style: { zIndex: computedZIndex } })), _jsxs("div", { ref: containerRef, className: classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
                    'ff-drawer--open': delayedOpen,
                    'ff-drawer--left': direction === 'left',
                }), style: {
                    zIndex: computedZIndex,
                    top: top,
                    height,
                    width,
                    ...(direction === 'left'
                        ? { left: '5px', right: 'auto' }
                        : { right: right ?? '5px' }),
                    overflow,
                    transition: `all ${transitionDuration} ease-in-out`,
                }, children: [showHeader && (_jsx("div", { className: classNames('ff-drawer-header', {
                            'ff-custom-header': customHeader,
                            'no-header-border': noHeaderBorder,
                        }), style: { zIndex: computedZIndex }, children: customHeader ? (_jsx("div", { className: classNames('ff-custom-header', {
                                'no-header-border': noHeaderBorder,
                            }), children: customHeader })) : (_jsxs("div", { className: "ff-drawer-action-section", children: [_jsxs("div", { className: "ff-action-button", children: [showEditButton && (_jsxs("button", { className: "ff-expand-collapse-button", onClick: onEdit, children: [_jsx(Icon, { name: "logo", height: 16, width: 16 }), "Edit"] })), _isExpanded && (_jsx(Tooltip, { title: isExpanded ? 'Minimize' : 'Maximize', placement: "bottom", children: _jsx("div", { className: "ff-expand-collapse-button", onClick: toggleExpand, children: _jsx(Icon, { name: isExpanded ? 'maximize_tree' : 'minimize_tree', height: 16, width: 16, hoverEffect: true, cursorType: "pointer" }) }) })), isBackButtonVisible &&
                                            (backButtonIcon || (_jsx(Tooltip, { title: "Back", children: _jsx(Icon, { name: "back_icon", height: 16, width: 16, hoverEffect: true, onClick: onBackButtonClick }) }))), title && _jsx("div", { className: "ff-drawer-title", children: title })] }), _isCloseModalButtonVisible && (_jsx("div", { className: "ff-close-icon", children: _jsx(Tooltip, { title: "Close", children: _jsx(Icon, { name: "drawer_icon_close", onClick: onCloseIconClick || onClose, height: 16, width: 16, color: "var(--tabs-label-active-color)", cursorType: "pointer" }) }) }))] })) })), _jsxs("div", { className: classNames({
                            'ff-drawer-body-with-scroll': isScrollBar,
                            'ff-drawer-body': !isScrollBar,
                            'no-footer': !isFooterRequired,
                        }), children: [' ', children] }), isFooterRequired && (_jsx("div", { className: classNames('ff-drawer-footer', {
                            'ff-custom-footer': customFooter,
                        }), style: {
                            zIndex: computedZIndex,
                        }, children: customFooter || footerContent || (_jsxs(_Fragment, { children: [_jsxs("div", { className: "button-container", children: [leftSecondaryButtonProps.label && (_jsx(Button, { onClick: leftPrimaryButtonProps.onClick, variant: "secondary", transparentBackground: true, ...leftSecondaryButtonProps })), leftPrimaryButtonProps.label && (_jsx(Button, { onClick: leftPrimaryButtonProps.onClick, variant: "primary", transparentBackground: true, ...leftPrimaryButtonProps })), leftTertiaryButtonProps?.label && (_jsx(Button, { onClick: leftTertiaryButtonProps.onClick, variant: "tertiary", transparentBackground: true, ...leftTertiaryButtonProps }))] }), _jsxs("div", { className: "button-container", children: [rightTertiaryButtonProps?.label && (_jsx(Button, { onClick: rightTertiaryButtonProps.onClick, variant: "tertiary", transparentBackground: true, ...rightTertiaryButtonProps })), secondaryButtonProps.label && (_jsx(Button, { onClick: onCancel, variant: "secondary", transparentBackground: true, ...secondaryButtonProps })), primaryButtonProps.label && (_jsx(Button, { onClick: primaryButtonProps.onClick, variant: "primary", transparentBackground: true, ...primaryButtonProps }))] })] })) }))] })] }), document.body);
};
export default Drawer;
//# sourceMappingURL=Drawer.js.map