/* global React */
const { useState: useStateQuote, useEffect: useEffectQuote } = React;

function ImmersiveQuote({ quotes }) {
  const [i, setI] = useStateQuote(0);
  useEffectQuote(() => {
    const t = setInterval(() => setI(x => (x + 1) % quotes.length), 7000);
    return () => clearInterval(t);
  }, [quotes.length]);
  const move = (d) => setI(x => (x + d + quotes.length) % quotes.length);
  const q = quotes[i];
  const total = String(quotes.length).padStart(2, '0');
  const now = String(i + 1).padStart(2, '0');

  return (
    <section className="cs-immersive">
      <div className="cs-immersive-inner">
        <div className="cs-immersive-quote-mark">&ldquo;</div>
        <blockquote key={i} className="cs-immersive-blockquote">
          {q.before}<em>{q.italic}</em>{q.after}
          <div className="cs-immersive-attr">
            <span className="name">{q.name}</span>
            <span className="sep"></span>
            <span className="role">{q.role}</span>
          </div>
        </blockquote>
        <div className="cs-immersive-controls">
          <div className="cs-immersive-counter"><b>{now}</b> / {total}</div>
          <button className="cs-immersive-btn" onClick={() => move(-1)} aria-label="Vorige">←</button>
          <button className="cs-immersive-btn" onClick={() => move(1)} aria-label="Volgende">→</button>
        </div>
      </div>
    </section>
  );
}

window.ImmersiveQuote = ImmersiveQuote;