/**
 * Custom Element Icons
 *
 * SVG icons for element types loaded from assets/img/elements/
 * These are used in the ElementToolbar and LayerTree components.
 */

import type { ElementType } from "@/types";

// Base URL for element icons - will be set from WordPress localized script
const getIconUrl = (filename: string): string => {
  // @ts-expect-error - oppbAdmin is defined in WordPress
  const baseUrl = window.oppbAdmin?.assetsUrl || "";
  return `${baseUrl}img/elements/${filename}`;
};

interface IconProps {
  className?: string;
}

// Individual icon components
export function RegularPriceIcon({ className = "w-5 h-5" }: IconProps) {
  return <img src={getIconUrl("regular.svg")} alt="Regular Price" className={className} />;
}

export function SalePriceIcon({ className = "w-5 h-5" }: IconProps) {
  return <img src={getIconUrl("sale.svg")} alt="Sale Price" className={className} />;
}

export function CurrencyIcon({ className = "w-5 h-5" }: IconProps) {
  return <img src={getIconUrl("currency.svg")} alt="Currency" className={className} />;
}

export function DiscountIcon({ className = "w-5 h-5" }: IconProps) {
  return <img src={getIconUrl("discount.svg")} alt="Discount" className={className} />;
}

export function TextElementIcon({ className = "w-5 h-5" }: IconProps) {
  return <img src={getIconUrl("text.svg")} alt="Text" className={className} />;
}

export function RangeIcon({ className = "w-5 h-5" }: IconProps) {
  return <img src={getIconUrl("range.svg")} alt="Price Range" className={className} />;
}

// Icon name to component mapping
export const elementIconComponents: Record<string, React.ComponentType<IconProps>> = {
  regular: RegularPriceIcon,
  sale: SalePriceIcon,
  currency: CurrencyIcon,
  discount: DiscountIcon,
  text: TextElementIcon,
  range: RangeIcon,
};

/**
 * Render element icon by type
 */
export function ElementIcon({ type, className = "w-5 h-5" }: { type: ElementType; className?: string }) {
  // Element type to icon name mapping
  const iconMap: Record<ElementType, string> = {
    regularPrice: "regular",
    salePrice: "sale",
    currencySymbol: "currency",
    discountBadge: "discount",
    text: "text",
    variablePriceRange: "range",
  };

  const iconName = iconMap[type];
  const IconComponent = iconName ? elementIconComponents[iconName] : null;
  if (!IconComponent) return null;
  return <IconComponent className={className} />;
}
