import { default as CxTooltip } from '../../../atoms/src/components/tooltip/tooltip.ts';
import { default as CortexElement } from '../../../base/src/cortex-element.ts';
import { default as CxGalleryItem } from '../../../molecules/src/gallery-item/gallery-item.ts';
import { Easing } from '../../../types/src/index.ts';
import { Filler, FillerMode } from '../../../types/src/bento-grid';
import { GalleryItem, GalleryItemContentPosition, GalleryItemContentVariant, GalleryItemEffect, GalleryItemShowContentType, GalleryItemTextRevealStyle, GalleryItemZoomStyle } from '../../../types/src/gallery-item';
import { CSSResultGroup, PropertyValues } from 'lit';
import { StaticValue } from 'lit/static-html.js';

/**
 * @summary CxBentoGrid - A responsive bento grid component with fixed cell height & responsive breakpoints.
 * Renders only the items visible in the viewport (scroll-based virtualization).
 *
 * @cssproperty [--item-height=200px] - The height of each grid item.
 *
 * @csspart base - The bento grid container
 * @csspart item - The item part of the bento grid
 *
 * @event {{ currentColumnCount: number }} cx-bento-resize - Emitted when the grid layout recalculates
 * @event {{ first: number; last: number }} cx-bento-range-change - Emitted when the visible item range changes due to scroll or layout update
 */
export default class CxBentoGrid extends CortexElement {
    static readonly styles: CSSResultGroup;
    /** Minimum scroll delta (px) required to trigger a virtual range update. */
    private static readonly SCROLL_THRESHOLD;
    static readonly dependencies: {
        'cx-gallery-item': typeof CxGalleryItem;
        'cx-tooltip': typeof CxTooltip;
    };
    private readonly localize;
    /** Pure layout calculator — computes absolute pixel positions. */
    private readonly bentoLayout;
    /** RAF gate for scroll handler to avoid layout thrash. */
    private _scrollRaf;
    /** Cached viewport height — updated on resize only, not on every scroll. */
    private _viewportHeight;
    /** Watches the host element for size changes so the grid reflows when its container resizes. */
    private _resizeObserver;
    /** Tracks the last emitted range to avoid firing cx-bento-range-change when the range hasn't changed. */
    private _lastEmittedFirst;
    private _lastEmittedLast;
    /**
     * References the main container element of the bento grid.
     * This element is used to calculate the grid width and apply
     * the grid layout styles for responsive behavior.
     */
    containerEl: HTMLDivElement;
    firstItemElement: CxGalleryItem | null;
    itemTooltip: CxTooltip;
    /**
     * Contains the array of bento grid items to be displayed.
     * Each item should have properties like id, title, content, size,
     * and optional style. (e.g., "2x1" for 2 columns wide, 1 row tall).
     */
    data: GalleryItem[];
    /**
     * Defines the responsive breakpoints for the bento grid layout.
     * The breakpoints determine how many columns the grid should have.
     */
    breakpoints: [number, number, number];
    /**
     * The content position for the small card. Column = 1
     */
    smallCardContentPosition: GalleryItemContentPosition;
    /**
     * The content position for the large card. Column > 1
     */
    largeCardContentPosition: GalleryItemContentPosition;
    /**
     * The content variant for the gallery item.
     */
    contentVariant: GalleryItemContentVariant;
    /**
     * When to make the grid expand to full column:
     * Always: every cell will fill whole column no matter the content size
     * None: normal behavior of bento grid
     * Responsive: cell will fill when responsive breakpoint is reached
     */
    filler: Filler;
    /**
     * How filler will fill the column:
     * Fit: filler will fit the available space, allow to have multiple items in the same column
     * Full: filler will fill the whole column, only one item in the column, the rest of the column will be filler
     */
    fillerMode: FillerMode;
    /**
     * Default maximum number of columns for the grid.
     */
    maxColumns: number;
    /**
     * The maximum number of rows to show.
     */
    maxRows: number;
    /**
     * Total number of items in the dataset, including those not yet loaded.
     * When set, the scroll container height is extended to reflect the full dataset
     * size so the scrollbar is accurate from the first render.
     * Unloaded slots are approximated as 1×1 items.
     */
    totalItems: number;
    /**
     * The show content type.
     */
    showContentType: GalleryItemShowContentType;
    /**
     * Specifies the label to display when the bento grid is empty.
     */
    emptyLabel: string;
    /**
     * The height of the gallery item.
     */
    itemHeight: string;
    /**
     * The gap between the gallery items.
     */
    rowGap: string;
    /**
     * The gap between the gallery items.
     */
    columnGap: string;
    /**
     * Whether the gallery item highlights its border on hover.
     */
    highlightBorder: boolean;
    /**
     * Whether the gallery item highlights its color overlay on hover.
     */
    highlightColorOverlay: boolean;
    /**
     * Whether the gallery item highlights its drop shadow on hover.
     */
    highlightDropShadow: boolean;
    /**
     * Whether the gallery item highlights its background on hover.
     */
    highlightBackground: boolean;
    /**
     * Whether the gallery item fades out its siblings on hover.
     */
    highlightSiblingsFadeOut: boolean;
    /**
     * The effect to apply to the gallery item.
     */
    effect: GalleryItemEffect;
    /**
     * The style of the text reveal effect.
     */
    textRevealStyle: GalleryItemTextRevealStyle;
    /**
     * The style of the zoom effect.
     */
    zoomStyle: GalleryItemZoomStyle;
    /**
     * The aria role description for bento grid items.
     */
    itemAriaRoleDescription: string;
    /**
     * The accessibility tooltip for the gallery.
     */
    accessibilityTooltip: string | undefined;
    /**
     * Specifies the easing function to use when changing slides.
     */
    easing: Easing;
    /** CSS styles applied to the grid container element. */
    private containerStyles;
    /**
     * Tracks the previous column count to detect when the grid layout recalculates
     * prevents unnecessary grid updates when the column count hasn't changed.
     */
    private prevColumnCount;
    private filledData;
    /**
     * Tracks the currently hovered item.
     */
    private hoveredItemId;
    /** Total scroll height in px — drives the container height for an accurate scrollbar. */
    private scrollSize;
    /** Current scroll offset in pixels from the top of the container. */
    private scrollOffset;
    /** Inclusive index of the first item in the rendered virtual window. */
    private virtualFirst;
    /** Inclusive index of the last item in the rendered virtual window. */
    private virtualLast;
    private isTooltipShown;
    protected galleryItemTag: string;
    /**
     * The gallery item literal tag.
     */
    get galleryItemLiteral(): StaticValue;
    get renderIdKey(): keyof GalleryItem;
    get canZoom(): boolean;
    get hasEvent(): boolean;
    get isBentoGridInEditMode(): boolean;
    get canSelectBentoGrid(): boolean;
    get isBentoGridSelected(): boolean;
    get selectedBentoGridItem(): string;
    get canMoveBentoGridItem(): boolean;
    get canDeleteBentoGridItem(): boolean;
    get easeCSSVariable(): string;
    constructor();
    runConnectedCallback(): void;
    disconnectedCallback(): void;
    runFirstUpdated(): void;
    /**
     * Returns the visible viewport height for virtualization.
     *
     * `containerEl.clientHeight` is unsafe here because, once `containerStyles.height`
     * is set to the laid-out `scrollSize`, the container height equals the entire
     * grid. We walk up to the nearest scrollable ancestor (or fall back to the
     * window) to keep `getActiveRange()` honest.
     */
    private measureViewportHeight;
    private showTooltip;
    private hideTooltip;
    /**
     * Extracts CSS custom properties from the computed styles and converts
     * them to numbers for use in grid calculations.
     */
    private getStyleAsNumber;
    /**
     * Get validated item size
     */
    private getItemSize;
    /**
     * Determines the number of columns for the grid based on the current
     * container width and breakpoints. Also builds filledData when filler is active.
     */
    private setupGrid;
    /**
     * Runs BentoLayout.compute() then updates scrollSize and active virtual range.
     */
    private computeLayout;
    /** Recalculates which items fall within the current scroll viewport. */
    private updateActiveRange;
    /**
     * Returns the index of the last item whose rowStart is within maxRows.
     */
    private maxRowsLastIndex;
    /**
     * Debounced event handler that responds to container resize events.
     */
    private handleResize;
    /** RAF-gated scroll handler — updates scroll offset and rerenders visible range. */
    private handleScroll;
    willUpdate(changed: PropertyValues): void;
    /**
     * Get content position based on the size of the item.
     */
    private getContentPosition;
    /**
     * CMS5 Only. Handle click event for the bento grid.
     */
    protected handleClick(event: MouseEvent): void;
    private handleMouseEnter;
    private handleMouseLeave;
    private handleKeyDown;
    private handleFocus;
    private handleBlur;
    private computeBentoItemEffectStyles;
    renderGalleryItem(galleryItem: {
        actualIndex: number;
        index: number;
        item: GalleryItem;
    }): import('lit').TemplateResult;
    render(): import('lit').TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-bento-grid': CxBentoGrid;
    }
}
