'use client';
import * as facelessUIImport from '@faceless-ui/window-info';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useIntersect } from '../../hooks/useIntersect.js';
import { PopupTrigger } from './PopupTrigger/index.js';
const baseClass = 'popup';
const Popup = (props)=>{
    const { boundingRef, button, buttonClassName, buttonType = 'default', caret = true, children, className, forceOpen, horizontalAlign: horizontalAlignFromProps = 'left', initActive = false, onToggleOpen, render, showOnHover = false, showScrollbar = false, size = 'medium', verticalAlign: verticalAlignFromProps = 'top' } = props;
    const { useWindowInfo } = facelessUIImport;
    const { height: windowHeight, width: windowWidth } = useWindowInfo();
    const [intersectionRef, intersectionEntry] = useIntersect({
        root: boundingRef?.current || null,
        rootMargin: '-100px 0px 0px 0px',
        threshold: 1
    });
    const contentRef = useRef(null);
    const [active, setActive] = useState(initActive);
    const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps);
    const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps);
    const setPosition = useCallback(({ horizontal = false, vertical = false })=>{
        if (contentRef.current) {
            const bounds = contentRef.current.getBoundingClientRect();
            const { bottom: contentBottomPos, left: contentLeftPos, right: contentRightPos, top: contentTopPos } = bounds;
            let boundingTopPos = 100;
            let boundingRightPos = document.documentElement.clientWidth;
            let boundingBottomPos = document.documentElement.clientHeight;
            let boundingLeftPos = 0;
            if (boundingRef?.current) {
                ({ bottom: boundingBottomPos, left: boundingLeftPos, right: boundingRightPos, top: boundingTopPos } = boundingRef.current.getBoundingClientRect());
            }
            if (horizontal) {
                if (contentRightPos > boundingRightPos && contentLeftPos > boundingLeftPos) {
                    setHorizontalAlign('right');
                } else if (contentLeftPos < boundingLeftPos && contentRightPos < boundingRightPos) {
                    setHorizontalAlign('left');
                }
            }
            if (vertical) {
                if (contentTopPos < boundingTopPos && contentBottomPos < boundingBottomPos) {
                    setVerticalAlign('bottom');
                } else if (contentBottomPos > boundingBottomPos && contentTopPos > boundingTopPos) {
                    setVerticalAlign('top');
                }
            }
        }
    }, [
        boundingRef
    ]);
    const handleClickOutside = useCallback((e)=>{
        if (contentRef.current.contains(e.target)) {
            return;
        }
        setActive(false);
    }, [
        contentRef
    ]);
    useEffect(()=>{
        setPosition({
            horizontal: true
        });
    }, [
        intersectionEntry,
        setPosition,
        windowWidth
    ]);
    useEffect(()=>{
        setPosition({
            vertical: true
        });
    }, [
        intersectionEntry,
        setPosition,
        windowHeight
    ]);
    useEffect(()=>{
        if (typeof onToggleOpen === 'function') onToggleOpen(active);
        if (active) {
            document.addEventListener('mousedown', handleClickOutside);
        } else {
            document.removeEventListener('mousedown', handleClickOutside);
        }
        return ()=>{
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [
        active,
        handleClickOutside,
        onToggleOpen
    ]);
    useEffect(()=>{
        setActive(forceOpen);
    }, [
        forceOpen
    ]);
    const classes = [
        baseClass,
        className,
        `${baseClass}--size-${size}`,
        `${baseClass}--v-align-${verticalAlign}`,
        `${baseClass}--h-align-${horizontalAlign}`,
        active && `${baseClass}--active`,
        showScrollbar && `${baseClass}--show-scrollbar`
    ].filter(Boolean).join(' ');
    return /*#__PURE__*/ React.createElement("div", {
        className: classes
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__trigger-wrap`
    }, showOnHover ? /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__on-hover-watch`,
        onMouseEnter: ()=>setActive(true),
        onMouseLeave: ()=>setActive(false)
    }, /*#__PURE__*/ React.createElement(PopupTrigger, {
        active,
        button,
        buttonType,
        className: buttonClassName,
        setActive
    })) : /*#__PURE__*/ React.createElement(PopupTrigger, {
        active,
        button,
        buttonType,
        className: buttonClassName,
        setActive
    })), /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__content`,
        ref: contentRef
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__hide-scrollbar`,
        ref: intersectionRef
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__scroll-container`
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__scroll-content`
    }, render && render({
        close: ()=>setActive(false)
    }), children && children))), caret && /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__caret`
    })));
};
export default Popup;

//# sourceMappingURL=index.js.map