import * as React from "react";
import { useRef, useLayoutEffect } from "react";
import { FinsembleDraggable } from "../../legacyControls/FinsembleDraggable";
import "../../../assets/css/dashbar.css";
export const DashbarItem = ({ id = `finsemble-draggable-${Date.now()}-${Math.random()}`, index, className, widget, height, dashbarHeight, widgetDividerWidth, setTitleHeight, setGrabLocation, widgetTitleGenerator, }) => {
    const titleRef = useRef(null);
    const divRef = useRef(null);
    /**
     * @returns calculated widget title height or full dashbar height as default
     */
    const getTitleHeight = () => {
        if (titleRef === null || titleRef === void 0 ? void 0 : titleRef.current) {
            const { offsetHeight } = titleRef.current;
            return height ? height + offsetHeight : offsetHeight;
        }
        else {
            return dashbarHeight;
        }
    };
    useLayoutEffect(() => {
        if (titleRef === null || titleRef === void 0 ? void 0 : titleRef.current) {
            const titleHeight = getTitleHeight();
            setTitleHeight(titleHeight, id);
        }
    });
    /**
     * Sets the location the titlebar of a view is clicked on when a user grabs a dashbar item
     *
     * @param event
     */
    const _setGrabLocation = () => {
        if (divRef === null || divRef === void 0 ? void 0 : divRef.current) {
            const rect = divRef.current.getBoundingClientRect();
            setGrabLocation(rect.left);
        }
    };
    const wrapperClass = `finsemble-dashbar-item ${className || ""}`;
    const itemStyle = {
        display: "flex",
        width: widget.width,
        borderRight: `${widgetDividerWidth}px solid var(--dashbar-divider-color)`,
    };
    const loadingImgWrapperStyle = {
        display: "flex",
        width: "inherit",
        height: `${getTitleHeight()}px`,
        alignItems: "center",
        justifyContent: "center",
    };
    const title = widgetTitleGenerator(widget, titleRef);
    return (React.createElement(FinsembleDraggable, { draggableId: id, index: index, key: id, wrapperClass: wrapperClass },
        React.createElement("div", { ref: divRef, id: id, onMouseDown: _setGrabLocation, className: "dashbar-item-frame", style: itemStyle },
            React.createElement("div", null, title),
            React.createElement("div", { className: "empty-space" }, 
            // renders a loading img if view is not ready and the icon url is provided
            (widget.view === null || widget.view.isVisible === false) && widget.loadingIconUrl && (React.createElement("div", { style: loadingImgWrapperStyle },
                React.createElement("img", { style: { height: "inherit", width: "inherit" }, src: widget.loadingIconUrl, alt: "loading..." })))))));
};
//# sourceMappingURL=DashbarItem.js.map