import * as eurKey from '@/data/eurKey.json'
import type { Key } from '@/models/Key'

export class Lesson {
  private readonly lessonId: number
  private readonly steps: number = 0
  private lessonText: string
  private keys: Key[] = []
  private counter: number = 0

  constructor(lessonId: number, lessonText: string) {
    this.lessonId = lessonId
    this.steps = lessonText.length
    this.lessonText = lessonText

    // Map key-objects to lessonText
    lessonText.split('').map((key) => {
      eurKey.eurKey.forEach((euKey) => {
        if (euKey.key == key) this.keys.push(euKey)
      })
    })
  }

  private createListener(index: number) {
    // Create listener function for a key
    const listener = (event: KeyboardEvent) => {
      if (event.code === this.keys[index].code) {
        // Remove listener event after key was pressed
        console.log(this.keys[index])
        document.removeEventListener('keydown', listener)

        // Remove typed char
        this.lessonText = this.lessonText.slice(1)

        // If more keys are in line, invoke function for new key
        if (this.counter < this.steps - 1) {
          this.counter++
          this.createListener(this.counter)
        } else {
          // Else lesson is done
          console.warn('DONE')
        }
      }
    }

    // Prints out the lessonText
    console.warn(this.lessonText)

    // Add listener for current key
    document.addEventListener('keydown', listener)
  }

  run() {
    if (this.steps === 0) return

    this.createListener(this.counter)
  }
}