import {ActivePage} from "activePage";

export class Psalm extends ActivePage
{
  constructor()
  {
    super('zalmy');
  }

  // cur_psalm is actually just a virtual property, which is not stored anywhere and its
  // accessor methods change the value of the cur_section property instead.
  get cur_psalm() {
    console.log('this.cur_section = ' + this.cur_section);
    // If this.cur_section has not been initialized yet, do it
    if (!this.cur_section) {
      var storedStr = localStorage.getItem("curPsalm");
      var stored = JSON.parse(storedStr);
      if ((stored == null) || (stored < 1) || (stored > 150)) {
        this.cur_section = 1;
        localStorage.setItem("curPsalm", JSON.stringify(this.cur_section));
      }
      else {
        this.cur_section = stored;
      }
    }

    return this.cur_section;
  }

  set cur_psalm(value) {
    if (value < 1) {
      this.cur_section = 150;
    }
    else if (value > 150) {
      this.cur_section = 1;
    }
    else {
      this.cur_section = value;
    }
    localStorage.setItem("curPsalm", JSON.stringify(this.cur_section));

    // set the parameter directly to avoid call to getter.
    this.display();
  }

  // Methods

  /**
   * Display the current Psalm
   *
   * @param number Number of the psalm to be displayed (optional)
   *
   * Displays the particular Psalm
   */
  display() {
    super.display();

    let psalm_id = `Ps.${this.cur_psalm}`;
    console.log(`psalm_id = ${psalm_id}`);
    document.getElementById(psalm_id).parentElement.
      classList.add('visible');

    window.scroll(0, 0);
  }

  // We have to override activePage’s next() and prev() methods to call
  // this.cur_psalm setter whcih does actual refresh of the page.
  next() {
    this.cur_psalm += 1;
  }

  prev() {
    this.cur_psalm -= 1;
  }

}

var thisPsalm = new Psalm();