import {useEffect, useState} from 'react';

import {render} from '@/dialogue.js';
import {TAU} from '@/util/math.js';

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

export default function Message({letters}) {
  const [radians, setRadians] = useState(0);
  useEffect(() => {
    setRadians(0);
    let handle;
    let last;
    const spin = (ts) => {
      if ('undefined' === typeof last) {
        last = ts;
      }
      const elapsed = (ts - last) / 1000;
      last = ts;
      setRadians((radians) => radians + (elapsed * TAU));
      handle = requestAnimationFrame(spin);
    };
    handle = requestAnimationFrame(spin);
    return () => {
      cancelAnimationFrame(handle);
    };
  }, []);
  return (
    <div className={styles.message}>
      {render(letters, '')(letters.length - 1, radians)}
    </div>
  )
}