import useComponentOutsideClick from "../../Types/UseComponentOutsideClick";
import Icon from "../Icon/Icon";
import Image from "../Image/Image";
import Route from "../../../Types/API/Route";
import React, { useEffect, useState, } from "react";
const HeaderIconDropdownButton = (props) => {
    const { ref, isComponentVisible, setIsComponentVisible } = useComponentOutsideClick(false);
    const [isDropdownVisible, setDropdownVisible] = useState(false);
    useEffect(() => {
        setDropdownVisible(isComponentVisible);
    }, [isComponentVisible]);
    useEffect(() => {
        setDropdownVisible(Boolean(props.showDropdown));
        setIsComponentVisible(Boolean(props.showDropdown));
    }, [props.showDropdown]);
    return (React.createElement("div", { className: "relative ml-1 flex-shrink-0" },
        React.createElement("div", null,
            React.createElement("button", { type: "button", className: "flex items-center justify-center h-9 w-9 rounded-lg bg-gray-50 border border-gray-200 hover:bg-gray-100 hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 transition-all duration-150", id: "user-menu-button", "aria-expanded": "false", "aria-haspopup": "true", onClick: () => {
                    var _a;
                    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
                    setIsComponentVisible(!isDropdownVisible);
                } },
                React.createElement("span", { className: "sr-only" }, props.name),
                props.iconImageUrl && (React.createElement(Image, { className: "h-7 w-7 rounded-md object-cover", onClick: () => {
                        var _a;
                        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
                    }, imageUrl: Route.fromString(`${props.iconImageUrl}`), alt: props.name })),
                props.icon && (React.createElement(Icon, { className: "h-5 w-5 text-gray-500", icon: props.icon }))),
            props.title && (React.createElement("span", { className: "ml-2 text-sm font-medium text-gray-700" }, props.title)),
            props.badge && props.badge > 0 && (React.createElement("span", { className: "absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs font-semibold text-white ring-2 ring-white" }, props.badge))),
        React.createElement("div", { ref: ref }, isComponentVisible && props.children)));
};
export default HeaderIconDropdownButton;
//# sourceMappingURL=HeaderIconDropdownButton.js.map