/**
 * useElementWrapperStyle Hook
 *
 * Single source of truth for UI element wrapper styling.
 * Used by both CanvasElement (constructor) and RuntimeElement (presentation)
 * to ensure WYSIWYG consistency.
 */

import { useMemo } from 'react';
import type { CSSProperties } from 'react';
import type { CanvasElement } from '../../../types/constructor';
import { buildElementStyle } from '../../../lib/elementStyles';
import {
  isTooltipElementType,
  isDescriptionElementType,
  isNavigationElementType,
  isGalleryElementType,
  isCarouselElementType,
  isLogoElementType,
  isSpotElementType,
} from '../../../lib/elementDefaults';

interface UseElementWrapperStyleOptions {
  element: CanvasElement;
  /** Constructor-specific: show selection styling */
  isSelected?: boolean;
  /** Constructor-specific: show edit mode styling */
  isEditMode?: boolean;
  /** Constructor-specific: show disabled styling */
  isDisabled?: boolean;
}

interface ElementWrapperStyle {
  className: string;
  style: CSSProperties;
}

/**
 * Hook that returns consistent wrapper styling for any UI element.
 * Ensures constructor and runtime render elements identically.
 *
 * @param options - Element and optional constructor state flags
 * @returns Object with className and style for the element wrapper
 */
export function useElementWrapperStyle({
  element,
  isSelected = false,
  isEditMode = false,
  isDisabled = false,
}: UseElementWrapperStyleOptions): ElementWrapperStyle {
  return useMemo(() => {
    // Determine element characteristics
    const hasIconDrivenSize =
      Boolean(element.iconUrl) &&
      (isTooltipElementType(element.type) ||
        isDescriptionElementType(element.type) ||
        isNavigationElementType(element.type) ||
        isLogoElementType(element.type) ||
        isSpotElementType(element.type));

    const hasTransparentBackground =
      (isDescriptionElementType(element.type) &&
        !element.iconUrl &&
        (!element.backgroundColor ||
          element.backgroundColor === 'transparent')) ||
      (isNavigationElementType(element.type) && Boolean(element.iconUrl)) ||
      isTooltipElementType(element.type) ||
      isGalleryElementType(element.type) ||
      isCarouselElementType(element.type);

    // Navigation elements (with or without icon) should be centered
    const isNavigationElement = isNavigationElementType(element.type);

    // Build className - same logic for both constructor and runtime
    const classNames = [
      'rounded text-xs font-semibold',
      // Text alignment: center for navigation buttons, left for others
      isNavigationElement ? 'text-center' : 'text-left',
      // Background/border - selected state overrides transparent
      isSelected
        ? 'border shadow border-blue-500 bg-blue-50'
        : hasTransparentBackground
          ? 'bg-transparent'
          : 'border shadow border-blue-200 bg-white/95',
      // Padding
      hasIconDrivenSize ? 'overflow-hidden p-0 leading-none' : 'px-3 py-2',
      // Flex centering for navigation elements (both icons and text)
      isNavigationElement ? 'flex items-center justify-center' : '',
      // Constructor-specific states (only applied when in constructor)
      isEditMode
        ? 'cursor-move'
        : isDisabled
          ? 'cursor-not-allowed opacity-50'
          : 'cursor-pointer',
    ]
      .filter(Boolean)
      .join(' ');

    // Build inline style from element properties
    const inlineStyle = buildElementStyle(element);

    return {
      className: classNames,
      style: inlineStyle,
    };
  }, [element, isSelected, isEditMode, isDisabled]);
}
