import React from 'react';
import { useCurrentFrame } from 'remotion';
import { SLACK } from '../../lib/slack-colors';
import { SENDER_CONFIGS } from '../../slack-types';
import type { SlackSender } from '../../slack-types';

interface SlackTypingIndicatorProps {
  sender: SlackSender;
  scale: number;
}

export const SlackTypingIndicator: React.FC<SlackTypingIndicatorProps> = ({ sender, scale }) => {
  const frame = useCurrentFrame();
  const config = SENDER_CONFIGS[sender];

  const dotSize = Math.round(6 * scale);
  const dotGap = Math.round(4 * scale);
  const fontSize = Math.round(13 * scale);

  const dots = [0, 1, 2].map((i) => {
    const cycle = 36;
    const offset = i * 12;
    const t = ((frame + offset) % cycle) / cycle;
    const y = t < 0.5
      ? Math.sin(t * Math.PI * 2) * -3 * scale
      : 0;
    return y;
  });

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: Math.round(8 * scale),
        paddingLeft: Math.round(52 * scale),
        paddingTop: Math.round(4 * scale),
        paddingBottom: Math.round(4 * scale),
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: dotGap }}>
        {dots.map((y, i) => (
          <div
            key={i}
            style={{
              width: dotSize,
              height: dotSize,
              borderRadius: dotSize / 2,
              backgroundColor: SLACK.typingDot,
              transform: `translateY(${y}px)`,
            }}
          />
        ))}
      </div>
      <span
        style={{
          fontSize,
          color: SLACK.textSecondary,
          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
          fontStyle: 'italic',
        }}
      >
        {config.name} is typing...
      </span>
    </div>
  );
};