import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from "classnames";
import { bemFactory } from "@gooddata/sdk-ui-kit";
import { DASHBOARD_LAYOUT_GRID_COLUMNS_COUNT } from "../../../../_staging/dashboard/flexibleLayout/config.js";
import { useResizeWidthStatus } from "../../../dragAndDrop/LayoutResizeContext.js";
const { b, e } = bemFactory("gd-grid-layout-ruler");
export function BulletsBar() {
    const widthResizingStatus = useResizeWidthStatus();
    const isActive = widthResizingStatus.isResizingWidth && !widthResizingStatus.isItemNested;
    const initialIndex = isActive ? widthResizingStatus.initialIndex : undefined;
    const currentIndex = isActive ? widthResizingStatus.currentIndex : undefined;
    const columnsNum = DASHBOARD_LAYOUT_GRID_COLUMNS_COUNT;
    return (_jsxs("div", { className: b({ active: isActive }), style: { "--columns-num": columnsNum }, "aria-hidden": true, children: [
            _jsx("div", { className: e("grid"), children: Array.from({ length: columnsNum }).map((_, index) => (_jsx("div", { className: e("bullet-container"), children: _jsx(Bullet, { index: index, isActive: index === currentIndex, isInitial: index === initialIndex }) }, index))) }), _jsx("div", { className: e("bullet-container", { last: true }), children: _jsx(Bullet, { index: DASHBOARD_LAYOUT_GRID_COLUMNS_COUNT, isActive: currentIndex === DASHBOARD_LAYOUT_GRID_COLUMNS_COUNT, isInitial: initialIndex === DASHBOARD_LAYOUT_GRID_COLUMNS_COUNT }) })
        ] }));
}
export function Bullet({ index, isActive, isInitial, }) {
    return (_jsx("div", { className: cx(`s-resize-bullet-${index}`, e("bullet", { active: isActive, initial: isInitial })) }));
}
