import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import { useScrollLock } from "../../../hooks/useScrollLock";
import "./styles.css";
function PhoneInputCountryOptionsContainer(props) {
    const { children, isOpen, onSearch, search, placeholder } = props;
    const containerRef = useRef(null);
    const [position, setPosition] = useState("bottom");
    function handleSearch(e) {
        onSearch(e.target.value);
    }
    useScrollLock(isOpen);
    useEffect(() => {
        if (!isOpen)
            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();
    }, [isOpen]);
    if (!isOpen)
        return _jsx(_Fragment, {});
    return (_jsxs("div", { className: `arkynPhoneInputCountryOptionsContainer ${position}`, ref: containerRef, children: [_jsx("input", { type: "search", name: "search-select", className: "arkynPhoneInputCountryOptionsContainerSearchSelect", value: search, id: "input-search", placeholder: placeholder, onChange: handleSearch }), children] }));
}
export { PhoneInputCountryOptionsContainer };
