import { __assign } from "tslib";
import React, { useEffect, useRef } from "react";
import Divider from "../../../Divider";
import { MenuStyle, MenuButtonsWrapper, MenuItemsWrapper } from "./styles";
var SelectMenu = function (props) {
    var innerProps = props.innerProps, selectProps = props.selectProps;
    var onInnerMenuOpen = selectProps.onInnerMenuOpen, isError = selectProps.isError;
    var menuRef = useRef(null);
    useEffect(function () {
        onInnerMenuOpen &&
            menuRef.current &&
            onInnerMenuOpen(menuRef.current.getBoundingClientRect());
    });
    useEffect(function () {
        if (menuRef.current) {
            var _a = menuRef.current.getBoundingClientRect(), bottom = _a.bottom, top_1 = _a.top, height = _a.height;
            if (bottom > window.innerHeight &&
                top_1 > height + (props.selectProps.size === "l" ? 56 : 48)) {
                menuRef.current.className = menuRef.current.className + " select-menu__top";
            }
        }
    }, []);
    return (React.createElement(MenuStyle, __assign({ "data-element": "select-menu", ref: menuRef, isError: isError, iconRight: selectProps.iconRight }, innerProps),
        React.createElement(MenuItemsWrapper, null, props.children),
        selectProps.buttonMenu && (React.createElement(MenuButtonsWrapper, { className: selectProps.classNameButtonMenu },
            React.createElement(Divider, { className: "select-menu__divider" }),
            selectProps.buttonMenu))));
};
export default SelectMenu;
