import { jsx as _jsx } from "react/jsx-runtime";
import { BottomDrawer } from '../BottomDrawer';
import { classNames } from '../utils/classNames';
import { cva } from '../utils/cva';
import { popoverClassnames } from './constants';
import { AnimatedWrapper, InnerContainer, StyledMuiPopper } from './styles';
import { useLogic } from './useLogic';
const animatedWrapperCva = cva(popoverClassnames.animatedWrapper, {
    variants: {
        isOpen: {
            true: popoverClassnames.animatedWrapperOpen,
        },
    },
});
export const NewPopover = ({ children, onClose, isOpen, title, className, style, placement = 'bottom', anchorEl, disablePortal, disableAutoFocus, }) => {
    const { isMobile, isOpened, shouldRender, handleAnimationEnd, handleClose, setContainerRef, } = useLogic({ isOpen, anchorEl, onClose, disableAutoFocus });
    if (isMobile) {
        return (_jsx(BottomDrawer, { title: title, onClose: handleClose, open: isOpened, className: className, style: style, ModalProps: {
                disableAutoFocus,
            }, children: children }));
    }
    return (_jsx(StyledMuiPopper, { className: popoverClassnames.root, open: shouldRender, placement: placement, anchorEl: anchorEl, disablePortal: disablePortal, children: _jsx(AnimatedWrapper, { className: classNames(className, animatedWrapperCva({ isOpen: isOpened })), style: style, onAnimationEnd: handleAnimationEnd, children: _jsx(InnerContainer, { ref: setContainerRef, tabIndex: -1, className: popoverClassnames.innerContainer, children: children }) }) }));
};
