/**
 * CanvasElement Component
 *
 * Individual element rendered on the constructor canvas.
 * Handles positioning and interaction, delegates styling to UiElementRenderer.
 * Supports WYSIWYG effects: appear animations always shown, interactive
 * effects (hover/focus/active) only in preview mode (not edit mode).
 */

import React from 'react';
import UiElementRenderer from '../UiElements/UiElementRenderer';
import { useElementEffects } from '../../hooks/useElementEffects';
import {
  buildTransitionStyle,
  buildAppearAnimationStyle,
  hasAnyEffects,
  type ElementEffectProperties,
} from '../../lib/elementEffects';
import type { CanvasElement as CanvasElementType } from '../../types/constructor';

interface CanvasElementProps {
  element: CanvasElementType;
  isSelected: boolean;
  isEditMode: boolean;
  isDisabled?: boolean;
  onClick: () => void;
  onMouseDown?: (event: React.MouseEvent) => void;
  /** Optional URL resolver for preloaded blob URLs */
  resolveUrl?: (url: string | undefined) => string;
  /** Gallery card click handler */
  onGalleryCardClick?: (cardIndex: number) => void;
}

const CanvasElement: React.FC<CanvasElementProps> = ({
  element,
  isSelected,
  isEditMode,
  isDisabled = false,
  onClick,
  onMouseDown,
  resolveUrl,
  onGalleryCardClick,
}) => {
  // Extract effect properties from element
  const effectProperties: Partial<ElementEffectProperties> = {
    appearAnimation: element.appearAnimation,
    appearAnimationDuration: element.appearAnimationDuration,
    appearAnimationEasing: element.appearAnimationEasing,
    hoverScale: element.hoverScale,
    hoverOpacity: element.hoverOpacity,
    hoverBackgroundColor: element.hoverBackgroundColor,
    hoverColor: element.hoverColor,
    hoverBoxShadow: element.hoverBoxShadow,
    hoverTransitionDuration: element.hoverTransitionDuration,
    focusScale: element.focusScale,
    focusOpacity: element.focusOpacity,
    focusOutline: element.focusOutline,
    focusBoxShadow: element.focusBoxShadow,
    activeScale: element.activeScale,
    activeOpacity: element.activeOpacity,
    activeBackgroundColor: element.activeBackgroundColor,
  };

  // Use effects hook - disabled in edit mode to avoid interfering with dragging
  const { effectStyle, eventHandlers } = useElementEffects(
    isEditMode ? {} : effectProperties,
  );

  // Build base position style
  let positionStyle: React.CSSProperties = {
    left: `${element.xPercent}%`,
    top: `${element.yPercent}%`,
    transform: 'translate(-50%, -50%)',
    // Reset button defaults to let UiElementRenderer control styling
    background: 'transparent',
    border: 'none',
    padding: 0,
    margin: 0,
  };

  // Merge interactive effects (preview mode only)
  if (!isEditMode && effectStyle.transform) {
    // Preserve the translate, add effect transform
    positionStyle.transform = `translate(-50%, -50%) ${effectStyle.transform}`;
    // Remove transform from effectStyle to avoid double application
    const { transform, ...restEffectStyle } = effectStyle;
    positionStyle = { ...positionStyle, ...restEffectStyle };
  } else if (!isEditMode) {
    positionStyle = { ...positionStyle, ...effectStyle };
  }

  // Add transition for interactive effects (preview mode only)
  if (!isEditMode && hasAnyEffects(effectProperties)) {
    positionStyle = { ...positionStyle, ...buildTransitionStyle(effectProperties) };
  }

  // Add appear animation (ALWAYS - for WYSIWYG)
  if (effectProperties.appearAnimation) {
    positionStyle = {
      ...positionStyle,
      ...buildAppearAnimationStyle(effectProperties),
    };
  }

  return (
    <button
      type='button'
      data-constructor-element-id={element.id}
      className='absolute'
      style={positionStyle}
      onMouseDown={isEditMode ? onMouseDown : undefined}
      onClick={onClick}
      {...(!isEditMode ? eventHandlers : {})}
    >
      <UiElementRenderer
        element={element}
        resolveUrl={resolveUrl}
        isSelected={isSelected}
        isEditMode={isEditMode}
        isDisabled={isDisabled}
        onGalleryCardClick={onGalleryCardClick}
      />
    </button>
  );
};

export default CanvasElement;
