/**
 * AnimationSelector Component (Legacy)
 *
 * @deprecated Use AnimationGroup from ../groups instead.
 * This component is kept for backward compatibility.
 *
 * Dropdown and settings for selecting element animations.
 * Price elements have additional options like countUp, pulse, glow.
 * Note: countUp animation settings are handled by AnimationGroup.
 */

import type { AnimationSettings } from "@/types";
import { Select, Slider } from "../ui";

// Base animations available for all elements
const BASE_ANIMATIONS = [
  { value: "none", label: "None" },
  { value: "fadeIn", label: "Fade In" },
  { value: "slideIn", label: "Slide In" },
  { value: "scaleIn", label: "Scale In" },
];

// Additional animations for price elements
const PRICE_ANIMATIONS = [
  { value: "pulse", label: "Pulse" },
  { value: "glow", label: "Glow" },
];

// Slide directions
const SLIDE_DIRECTION_OPTIONS = [
  { value: "left", label: "From Left" },
  { value: "right", label: "From Right" },
  { value: "top", label: "From Top" },
  { value: "bottom", label: "From Bottom" },
];

// Easing options
const EASING_OPTIONS = [
  { value: "ease", label: "Ease" },
  { value: "ease-in", label: "Ease In" },
  { value: "ease-out", label: "Ease Out" },
  { value: "ease-in-out", label: "Ease In Out" },
  { value: "linear", label: "Linear" },
  { value: "cubic-bezier(0.68, -0.55, 0.265, 1.55)", label: "Bounce" },
];

interface AnimationSelectorProps {
  animation: AnimationSettings;
  onUpdate: (animation: AnimationSettings) => void;
  isPriceElement?: boolean;
  /** Use compact styling for floating panels */
  compact?: boolean;
}

export function AnimationSelector({ animation, onUpdate, isPriceElement = false, compact = false }: AnimationSelectorProps) {
  const handleChange = <K extends keyof AnimationSettings>(key: K, value: AnimationSettings[K]) => {
    onUpdate({ ...animation, [key]: value });
  };

  const size = compact ? "compact" : "default";
  const labelClass = compact ? "floating-settings__label" : "settings-label";
  const fieldClass = compact ? "floating-settings__group" : "settings-field";
  const hintClass = compact ? "text-[10px] text-gray-400 mt-2" : "animation-preview-hint";

  // Build animation type options based on element type
  const animationOptions = isPriceElement ? [...BASE_ANIMATIONS, ...PRICE_ANIMATIONS] : BASE_ANIMATIONS;

  return (
    <div className="animation-selector">
      {/* Animation Type */}
      <div className={fieldClass}>
        <label className={labelClass}>Animation Type</label>
        <Select
          value={animation.type}
          onValueChange={(value: string) => handleChange("type", value as AnimationSettings["type"])}
          options={animationOptions}
          size={size}
        />
      </div>

      {animation.type !== "none" && (
        <>
          {/* Slide Direction (only for slideIn) */}
          {animation.type === "slideIn" && (
            <div className={fieldClass}>
              <label className={labelClass}>Slide Direction</label>
              <Select
                value={animation.direction ?? "left"}
                onValueChange={(value: string) => handleChange("direction", value as AnimationSettings["direction"])}
                options={SLIDE_DIRECTION_OPTIONS}
                size={size}
              />
            </div>
          )}

          {/* Duration */}
          <div className={fieldClass}>
            <label className={labelClass}>Duration: {animation.duration}ms</label>
            <Slider
              value={animation.duration}
              onValueChange={(value: number) => handleChange("duration", value)}
              min={100}
              max={2000}
              step={50}
              size={size}
            />
          </div>

          {/* Delay */}
          <div className={fieldClass}>
            <label className={labelClass}>Delay: {animation.delay}ms</label>
            <Slider
              value={animation.delay}
              onValueChange={(value: number) => handleChange("delay", value)}
              min={0}
              max={1000}
              step={50}
              size={size}
            />
          </div>

          {/* Easing */}
          <div className={fieldClass}>
            <label className={labelClass}>Easing</label>
            <Select
              value={animation.easing}
              onValueChange={(value: string) => handleChange("easing", value)}
              options={EASING_OPTIONS}
              size={size}
            />
          </div>

          {/* Animation Preview Hint */}
          <div className={hintClass}>
            <span className="text-xs text-gray-500">Animation will be visible in the frontend preview.</span>
          </div>
        </>
      )}
    </div>
  );
}

export default AnimationSelector;
