class App {
  constructor() {
    this.excerptArray = []
    this.displayArray = []
    this.topicArray = [];
  }

  load() {
    d3.csv('https://beta.ctvnews.ca/content/dam/common/exceltojson/trudeau-speeches.txt').then(data => {
      data.forEach(d => {
        new Excerpt(d.Phrase, d.Date, d.sentence)
        this.topicArray.includes(d.Phrase) ? null : this.topicArray.push(d.Phrase)
      })
      this.create()
    })    
  }

  create() {
    document.querySelectorAll('.speech-container').forEach(div => {
      let topic = div.dataset.phrase;
      new Display (topic, div, topic.charAt(0).toUpperCase() + topic.slice(1), topic)
    })

    this.displayArray.forEach(display => display.create())
    
  }
}

class Excerpt {
  constructor(id, date, excerpt) {
    this.id = id;
    this.excerpt = excerpt;
    this.date = date;

    myApp.excerptArray.push(this)
  }

  highlight(phrase) {
    let variations = [phrase, phrase.toLowerCase().split(' ').map(word => word.charAt(0).toUpperCase() + word.substring(1)).join(' ')];
    phrase.split(' ').forEach((word, i) => {
      let temp = phrase.split(' ');
      temp[i] = temp[i].charAt(0).toUpperCase() + temp[i].slice(1)
      variations.push(temp.join(' '))
    })

    let join = this.excerpt;

    variations.forEach(v => {
      let split = join.split(v);
      join = split.join(`<span class='speech-highlight'>${v}</span>`)
    })

    return `"${join}"`;
  }
}


class Display {
  constructor(id, parent, title, phrase) {
    this.parent = parent;
    this.id = id;
    this.title = title;
    this.phrase = phrase;
    this.excerptArray = [];
    this.index = 0;

    myApp.displayArray.push(this)
  }

  get currentExcerpt() {
    return this.excerptArray[this.index]
  }

  create() {
    const parent = this.parent;

    if (!myApp.topicArray.includes(this.phrase)) {
      console.log(`No data for phrase: "${this.phrase}"`)
      return parent.remove()
    } 


    myApp.excerptArray.forEach(excerpt => {
      if (excerpt.id === this.id) {
        this.excerptArray.push(excerpt)
      }
    })

    let titleContainer = make('div', parent, 'title-container')
    titleContainer.innerText = `"${this.title}"`;

    this.excerptContainer = make('div', parent, 'excerpt-container');
    this.excerptCount = make('div', this.excerptContainer, 'excerpt-count')
    this.excerptDiv = make('div', this.excerptContainer, 'excerpt-div')
    

    this.dateContainer = make('div', parent, 'date-container')

    let leftArrow = make('div', parent, 'arrow left')
    leftArrow.innerText = "◄"
    leftArrow.onclick = () => {
      this.index--
      if (this.index < 0) {
        this.index = this.excerptArray.length - 1;
      }
      this.update()
    }
    
    let rightArrow = make('div', parent, 'arrow right')
    rightArrow.innerText = "►"
    rightArrow.onclick = () => {
      this.index++
      if (this.index >= this.excerptArray.length) {
        this.index = 0;
      }
      this.update();
    }

    let disclaimer = make('div', parent, 'disclaimer')
      disclaimer.innerText = 'Sentences have been pulled from unedited speech transcripts and might not be verbatim'

    this.update();
  }

  update() {
    this.excerptCount.innerHTML = `<span class='text-bold'>${this.index + 1}</span> / ${this.excerptArray.length}`
    this.excerptDiv.innerHTML = this.currentExcerpt.highlight(this.phrase);
    this.dateContainer.innerText = this.currentExcerpt.date;
  }
}

function make(type, parent, CLASS=null, ID=null) {
  let element = document.createElement(type);
  ID ? element.setAttribute('class', CLASS) : null;
  CLASS ? element.setAttribute('class', CLASS) : null;
  return parent.appendChild(element);
}

const myApp = new App();
myApp.load()