/**
 * CSS class for the drag ghost.
 *
 * @internal
 */
const DRAG_GHOST_CLASS = 'tile-manager-drag-ghost';
/**
 * CSS class for the resize ghost.
 *
 * @internal
 */
const RESIZE_GHOST_CLASS = 'tile-manager-resize-ghost';
/**
 * Animation keyframes name for ghost pulse effect.
 *
 * @internal
 */
const GHOST_PULSE_ANIMATION = 'tile-ghost-pulse';
/**
 * Injects keyframes if not already present.
 *
 * @internal
 */
function ensureKeyframesInjected() {
    const styleId = 'tile-manager-ghost-keyframes';
    if (document.getElementById(styleId)) {
        return;
    }
    const style = document.createElement('style');
    style.id = styleId;
    style.textContent = `
        @keyframes ${GHOST_PULSE_ANIMATION} {
            0%, 100% { opacity: 0.4; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(1.005); }
        }
    `;
    document.head.appendChild(style);
}
/**
 * Creates a ghost element for tile dragging operations.
 *
 * @param tile - The tile element to create a ghost from.
 * @returns The ghost element.
 *
 * @public
 */
export function createTileDragGhost(tile) {
    ensureKeyframesInjected();
    const rect = tile.getBoundingClientRect();
    const ghost = document.createElement('div');
    ghost.className = DRAG_GHOST_CLASS;
    ghost.style.cssText = buildDragGhostStyles(rect);
    return ghost;
}
/**
 * Creates a ghost element for tile resize operations.
 *
 * @param tile - The tile element to create a ghost from.
 * @returns The ghost element.
 *
 * @public
 */
export function createTileGhost(tile) {
    ensureKeyframesInjected();
    const rect = tile.getBoundingClientRect();
    const ghost = document.createElement('div');
    ghost.className = RESIZE_GHOST_CLASS;
    ghost.style.cssText = buildResizeGhostStyles(rect);
    return ghost;
}
/**
 * Updates the ghost element position during drag.
 *
 * @param ghost - The ghost element.
 * @param x - The x position.
 * @param y - The y position.
 *
 * @public
 */
export function updateGhostPosition(ghost, x, y) {
    const currentStyles = ghost.style.cssText;
    const leftRegex = /left:\s*[^;]+;?/giu;
    const topRegex = /top:\s*[^;]+;?/giu;
    let updatedStyles = currentStyles.replace(leftRegex, '').replace(topRegex, '');
    updatedStyles += ` left: ${x.toString()}px; top: ${y.toString()}px;`;
    ghost.style.cssText = updatedStyles;
}
/**
 * Updates the ghost element size during resize.
 *
 * @param ghost - The ghost element.
 * @param width - The width.
 * @param height - The height.
 *
 * @public
 */
export function updateGhostSize(ghost, width, height) {
    const currentStyles = ghost.style.cssText;
    const widthRegex = /width:\s*[^;]+;?/giu;
    const heightRegex = /height:\s*[^;]+;?/giu;
    let updatedStyles = currentStyles.replace(widthRegex, '').replace(heightRegex, '');
    updatedStyles += ` width: ${width.toString()}px; height: ${height.toString()}px;`;
    ghost.style.cssText = updatedStyles;
}
/**
 * Removes a ghost element from the DOM.
 *
 * @param ghost - The ghost element to remove.
 *
 * @public
 */
export function removeGhost(ghost) {
    ghost?.parentNode?.removeChild(ghost);
}
/**
 * Builds the CSS styles for a drag ghost.
 *
 * @param rect - The bounding rectangle.
 * @returns The CSS text.
 */
function buildDragGhostStyles(rect) {
    const styles = [
        'position: absolute',
        'left: 0',
        'top: 0',
        `width: ${rect.width.toString()}px`,
        `height: ${rect.height.toString()}px`,
        'pointer-events: none',
        'z-index: 10000',
        'opacity: 0.85',
        'box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1)',
        'border-radius: var(--mosaik-layout-radius, 12px)',
        'background: linear-gradient(135deg, var(--mosaik-scheme-surface, #fff) 0%, var(--mosaik-scheme-background, #f5f5f5) 100%)',
        'border: 2px solid var(--mosaik-color-primary-500, #007bff)',
        'backdrop-filter: blur(4px)',
        'transition: box-shadow 0.2s ease, transform 0.1s ease'
    ];
    return styles.join('; ');
}
/**
 * Builds the CSS styles for a resize ghost.
 *
 * @param rect - The bounding rectangle.
 * @returns The CSS text.
 */
function buildResizeGhostStyles(rect) {
    const styles = [
        'position: fixed',
        `left: ${rect.left.toString()}px`,
        `top: ${rect.top.toString()}px`,
        `width: ${rect.width.toString()}px`,
        `height: ${rect.height.toString()}px`,
        'pointer-events: none',
        'z-index: 10000',
        'border-radius: var(--mosaik-layout-radius, 12px)',
        'background: linear-gradient(135deg, rgba(var(--mosaik-color-primary-500-rgb, 0, 123, 255), 0.15) 0%, rgba(var(--mosaik-color-primary-500-rgb, 0, 123, 255), 0.25) 100%)',
        'border: 2px dashed var(--mosaik-color-primary-500, #007bff)',
        'box-shadow: inset 0 0 0 1px rgba(var(--mosaik-color-primary-500-rgb, 0, 123, 255), 0.3), 0 4px 16px rgba(0, 0, 0, 0.1)',
        'backdrop-filter: blur(4px)',
        `animation: ${GHOST_PULSE_ANIMATION} 1.5s ease-in-out infinite`,
        'transition: width 0.15s ease-out, height 0.15s ease-out'
    ];
    return styles.join('; ');
}
//# sourceMappingURL=TileManagerGhostUtil.js.map