import React, { useEffect, useState } from 'react';
import { Text } from 'react-native';

interface TypewriterTextProps {
  text: string;
  speed?: number;     // 打字速度（毫秒）
  loop?: boolean;     // 是否循环播放
  delay?: number;     // 每轮之间的延迟时间
}

const TypewriterText: React.FC<TypewriterTextProps> = ({
  text,
  speed = 150,
  loop = false,
  delay = 2000,
}) => {
  const [displayedText, setDisplayedText] = useState<string>(text[0] || ''); // 初始为第一个字符
  const [currentIndex, setCurrentIndex] = useState<number>(1); // 从第2个字符开始

  useEffect(() => {
    let typingTimeout: ReturnType<typeof setTimeout> | null = null;
    let resetTimeout: ReturnType<typeof setTimeout> | null = null;

    if (currentIndex < text.length) {
      // 正常打字过程
      typingTimeout = setTimeout(() => {
        setDisplayedText(text.slice(0, currentIndex + 1));
        setCurrentIndex((prev) => prev + 1);
      }, speed);
    } else if (loop) {
      // 当前一轮完成，等待 delay 后重新开始
      resetTimeout = setTimeout(() => {
        setCurrentIndex(1); // 从第2个字符重新开始
        setDisplayedText(text[0] || ''); // 重置显示文本
      }, delay);
    }

    return () => {
      if (typingTimeout) clearTimeout(typingTimeout);
      if (resetTimeout) clearTimeout(resetTimeout);
    };
  }, [currentIndex, text, speed, loop, delay]);

  return (
    <Text>{displayedText}</Text>
  );
};

export default TypewriterText;