class HomeworkPage extends HomeworkElement {
	constructor (type) {
      super()
      this.innerHTML =
      `
      <div id="page-header">
        <h2 id="text005" class="text"></h2>
        <div id="buttons">
          <div id="new" class="button">
            <span id="text035" class="button-text text"></span>
          </div>
          <div id="save" class="button">
            <span id="text037" class="button-text text"></span>
          </div>
          <div id="train" class="button">
            <span id="text036" class="button-text text"></span>
          </div>
        </div>
      </div>
      <div id="sub-headers">
        <p class="text source-language"></p>
        <p class="text target-language"></p>
      </div>
      <div id="content">
      </div>
      `
      let languageTextId = ""
      let sourceLanguageTextId = "text030"
      let targetLanguageTextId = ""
      switch(type) {
        case HomeworkTypes.VOCABULARY_ENGLISH:
          console.log("English vocabulary")
          languageTextId = "text005"
          targetLanguageTextId = "text031"
          break
        case HomeworkTypes.VOCABULARY_FRENCH:
          console.log("French vocabulary")
          languageTextId = "text025"
          targetLanguageTextId = "text032"
          break
        case HomeworkTypes.VOCABULARY_GERMAN:
          console.log("German vocabulary")
          languageTextId = "text024"
          targetLanguageTextId = "text034"
          break
        case HomeworkTypes.VOCABULARY_SPANISH:
          console.log("Spanish vocabulary")
          languageTextId = "text026"
          targetLanguageTextId = "text033"
          break
        default:
          console.log("Math")
          languageTextId = "text004"
      }
      this.type = type
      this.headingText = this.querySelector('h2')
      this.headingText.setAttribute("id", languageTextId)
      this.languageHeaders = this.querySelectorAll('#sub-headers > p')
      this.sourceLanguage = this.languageHeaders[0]
      this.targetLanguage = this.languageHeaders[1]
      this.sourceLanguage.setAttribute("id", sourceLanguageTextId)
      this.targetLanguage.setAttribute("id", targetLanguageTextId)
      this.content = this.querySelector('#content')
      this.content.addEventListener("delete", this.deleteTask.bind(this))
      this.newButton = this.querySelector('#new')
      this.newButton.addEventListener("click", this.newVocabulary.bind(this))
      this.saveButton = this.querySelector('#save')
      this.saveButton.addEventListener("click", this.saveVocabularies.bind(this))
      this.trainButton = this.querySelector('#train')
      this.trainButton.addEventListener("click", this.trainVocabulary.bind(this))
    }

    connectedCallback() {
      console.log("Page of type " + this.type + " added to session")
      if(this.type == HomeworkTypes.VOCABULARY_ENGLISH) {
        const row = new HomeworkVocabularyTask(crypto.randomUUID())
        this.content.append(row)
      }
    }

    newVocabulary() {
      if(this.type == HomeworkTypes.VOCABULARY_ENGLISH) {
        const row = new HomeworkVocabularyTask(crypto.randomUUID())
        this.content.append(row)
      }
    }

    saveVocabularies() {
      console.log("Saving page content")
    }

    trainVocabulary() {
      console.log("Train!!")
    }

    deleteTask(event) {
      const tasks = this.content.querySelectorAll("homework-vocabulary-task")
      if(tasks.length > 1) {
        tasks.forEach((task) => {
          if(event.detail.id == task.getId()) {
            console.log("Removing task '" + task.getId() + "'")
            task.remove()
          }
        })
      }

    }
}
customElements.define('homework-page', HomeworkPage)