/**
 * Text special effect for Petros where each word fades in
 */

import React, { Component } from 'react'

export default class PetrosText extends Component {
  constructor(props) {
    super(props)
    this.state = { index: -1, words: [] }
    this.next = this.next.bind(this)
  }

  componentDidUpdate(prevProps) {
    if (this.props.ready && !prevProps.ready) {
      this.start()      
    } else if (!this.props.ready) {
      clearTimeout(this.timeout)
    }
  }

  componentDidUnmount() {
    clearTimeout(this.timeout)
  }

  start() {
    const { timePerWord, text } = this.props
    this.setState({
      words: this.props.text.trim().split(" "),
      index: -1
    })
    clearTimeout(this.timeout)
    this.timeout = setTimeout(this.next, timePerWord)
  }
  
  next() {
    const { timePerWord, onComplete } = this.props
    const { index, words } = this.state
    if (index < words.length) {
      this.timeout = setTimeout(this.next, timePerWord)
      this.setState({ index: index + 1 })
    } else {
      onComplete()
    }
  }

  render() {
    const { index, words } = this.state
    return (
      <div className="fade-words">
        {words.map((word, i) => (
          <span key={i} className={i <= index ? "visible" : ""}>{word}</span>
        ))}
      </div>
    )
  }
}