/**
 * DiscountBadgeRenderer Component
 *
 * Renders discount badge elements with:
 * - Percentage or amount format
 * - Custom format support
 */

import { Text } from "react-konva";
import type { DiscountBadgeElement } from "@/types";
import { getCanvasFontFamily } from "@/types";
import { useGoogleFont } from "@/hooks/useGoogleFonts";

interface DiscountBadgeRendererProps {
  element: DiscountBadgeElement;
}

// Build Konva fontStyle string
const buildFontStyle = (element: DiscountBadgeElement): string => {
  const parts: string[] = [];

  const fontWeight = element.typography?.fontWeight?.desktop ?? 700;
  if (fontWeight >= 700) {
    parts.push("bold");
  } else if (fontWeight <= 300) {
    parts.push("300");
  }

  if (element.typography?.fontStyle === "italic") {
    parts.push("italic");
  }

  return parts.join(" ") || "normal";
};

// Get display text based on format
const getDisplayText = (element: DiscountBadgeElement): string => {
  // For canvas preview, show placeholder based on format
  let displayText: string;

  switch (element.format) {
    case "amount":
      displayText = "-$19.99";
      break;
    case "custom":
      // Show custom format with placeholder values
      displayText = (element.customFormat || "-{discount}%")
        .replace("{discount}", "20")
        .replace("{discountPercentage}", "20")
        .replace("{discountAmount}", "$19.99")
        .replace("{discountAmountRaw}", "19.99");
      break;
    case "percentage":
    default:
      displayText = "-20%";
      break;
  }

  // Apply text transform (with safe access)
  const textTransform = element.typography?.textTransform ?? "none";
  switch (textTransform) {
    case "uppercase":
      return displayText.toUpperCase();
    case "lowercase":
      return displayText.toLowerCase();
    default:
      return displayText;
  }
};

export function DiscountBadgeRenderer({ element }: DiscountBadgeRendererProps) {
  const displayText = getDisplayText(element);

  // Safely extract values with fallbacks for initial render
  const paddingLeft = element.padding?.left?.desktop ?? 8;
  const paddingTop = element.padding?.top?.desktop ?? 4;
  const fontSize = element.typography?.fontSize?.desktop ?? 14;
  const letterSpacing = element.typography?.letterSpacing?.desktop ?? 0;
  const fontFamilyRaw = element.typography?.fontFamily ?? "";
  const lineHeight = element.typography?.lineHeight ?? 1.2;
  const textDecoration = element.typography?.textDecoration ?? "none";

  // Load Google font if needed - triggers re-render when font is ready
  useGoogleFont(fontFamilyRaw);

  // Get canvas-safe font family (undefined for default)
  const fontFamily = getCanvasFontFamily(fontFamilyRaw);

  // Position text with padding offset (text is rendered at top-left of its content area)
  // The parent Group handles the overall element positioning
  return (
    <Text
      x={paddingLeft}
      y={paddingTop}
      text={displayText}
      fill={element.color}
      fontFamily={fontFamily}
      fontSize={fontSize}
      fontStyle={buildFontStyle(element)}
      lineHeight={lineHeight}
      letterSpacing={letterSpacing}
      textDecoration={textDecoration === "none" ? "" : textDecoration}
      listening={false}
    />
  );
}
