import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Search } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { useScrollLock } from "../../../hooks/useScrollLock";
import { Input } from "../../input";
import "./styles.css";
function SelectOptionsContainer(props) {
    const { children, isFocused, isSearchable, search, onSearch } = props;
    const containerRef = useRef(null);
    const [position, setPosition] = useState("bottom");
    useScrollLock(isFocused);
    useEffect(() => {
        if (!isFocused)
            return;
        const checkContainerPosition = () => {
            if (!containerRef.current)
                return;
            const parentElement = containerRef.current.parentElement;
            if (!parentElement)
                return;
            const parentRect = parentElement.getBoundingClientRect();
            const viewportHeight = window.innerHeight;
            const estimatedContainerHeight = 300;
            const spaceBelow = viewportHeight - parentRect.bottom;
            if (spaceBelow < estimatedContainerHeight &&
                parentRect.top > estimatedContainerHeight) {
                setPosition("top");
            }
            else {
                setPosition("bottom");
            }
        };
        checkContainerPosition();
    }, [isFocused]);
    function handleSearch(e) {
        if (!isSearchable)
            return;
        onSearch(e.target.value);
    }
    if (!isFocused)
        return _jsx(_Fragment, {});
    return (_jsxs("div", { ref: containerRef, className: `arkynSelectOptionsContainer ${position}`, children: [isSearchable && (_jsx(Input, { type: "search", name: "search-select", variant: "underline", leftIcon: Search, value: search, onChange: handleSearch })), children] }));
}
export { SelectOptionsContainer };
