import {memo, useEffect, useState} from 'react';

import {render} from '@/dialogue.js';
import {useRadians} from '@/react/context/radians.js';

import styles from './message.module.css';

function Message({letters}) {
  const radians = useRadians();
  const [localRadians, setLocalRadians] = useState(radians);
  const [isAnimating, setIsAnimating] = useState(true);
  useEffect(() => {
    const handle = setTimeout(() => {
      setIsAnimating(false);
    }, 2_000);
    return () => {
      clearTimeout(handle);
    }
  }, []);
  useEffect(() => {
    if (isAnimating) {
      setLocalRadians(radians)
    }
  }, [isAnimating, radians]);
  return (
    <div className={styles.message}>
      {render(letters, '')(letters.length - 1, localRadians)}
    </div>
  )
}

export default memo(Message);