/**
 * Typing Indicator Component
 * Shows animated dots when bot is typing
 * 
 * @since 1.5.0 - Added full appearance preset support
 */

import { motion } from 'framer-motion';
import { Bot } from 'lucide-react';
import { useChatStore } from '@/store/chatStore';
import { resolveValue, GlobalValues } from '@/utils/resolveAppearance';

export function TypingIndicator() {
  const { config } = useChatStore();
  
  // Get appearance settings
  const globalValues = (config.appearance_preset?.global_values || {}) as GlobalValues;
  const typingSettings = config.element_settings?.typingIndicator || config.appearance_preset?.element_settings?.typingIndicator;
  const botSettings = config.element_settings?.botMessage || config.appearance_preset?.element_settings?.botMessage;
  
  // Resolve typing indicator settings
  const bubbleBackground = resolveValue(typingSettings?.background, globalValues, '#FFFFFF');
  const dotColor = resolveValue(typingSettings?.dotColor, globalValues, '#6B7280');
  const dotSize = resolveValue(typingSettings?.dotSize, globalValues, '8px');
  const animationSpeedStr = resolveValue(typingSettings?.animationSpeed, globalValues, '1.4s');
  
  // Parse animation speed (remove 's' suffix and convert to number)
  const animationSpeed = parseFloat(animationSpeedStr.replace('s', '')) || 1.4;
  
  // Avatar settings from bot message
  const showAvatar = botSettings?.showAvatar !== false;
  const avatarUrl = botSettings?.avatarUrl || config.avatar_url;
  const primaryColor = config.primary_color || '#3BC2D0';
  
  // Parse dot size for numeric calculations
  const dotSizeNum = parseInt(dotSize) || 8;
  
  return (
    <motion.div
      className="flex gap-2 justify-start"
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -10 }}
    >
      {/* Avatar */}
      {showAvatar && (
        <div 
          className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0"
          style={{ backgroundColor: `${primaryColor}20` }}
        >
          {avatarUrl ? (
            <img 
              src={avatarUrl} 
              alt="" 
              className="w-8 h-8 rounded-full object-cover"
            />
          ) : (
            <Bot className="w-4 h-4" style={{ color: primaryColor }} />
          )}
        </div>
      )}
      
      {/* Typing bubble */}
      <div 
        className="rounded-2xl rounded-tl-none px-4 py-3 shadow-sm border border-gray-100"
        style={{ backgroundColor: bubbleBackground }}
      >
        <div className="flex gap-1.5 items-center">
          {[0, 1, 2].map((i) => (
            <motion.span
              key={i}
              className="rounded-full"
              style={{ 
                backgroundColor: dotColor,
                width: dotSize,
                height: dotSize,
                minWidth: dotSizeNum,
                minHeight: dotSizeNum,
              }}
              animate={{
                y: [0, -4, 0],
                opacity: [0.5, 1, 0.5]
              }}
              transition={{
                duration: animationSpeed / 2,
                repeat: Infinity,
                delay: i * (animationSpeed / 9), // Stagger the dots
                ease: 'easeInOut',
              }}
            />
          ))}
        </div>
      </div>
    </motion.div>
  );
}
