import { Notyf } from "notyf";

const milliSecond = 1000;

export class Timer {
  pointer = 0;

  constructor() {
    this.mins = Number(sessionStorage.getItem("mins")) || 12;
    this.running = Boolean(Number(sessionStorage.getItem("running"))) || false;
    this.deadline =
      Number(sessionStorage.getItem("deadline")) || new Date().getTime();
    if (this.running) {
      this.start(false);
    } else {
      this.reset();
    }
    addTimerBehaviour(this);
  }
  store() {
    sessionStorage.setItem("mins", this.mins);
    sessionStorage.setItem("running", Number(this.running));
    sessionStorage.setItem("deadline", this.deadline);
  }
  set(m, s) {
    const timer = document.getElementById("timer-display");
    m = m < 10 ? "0" + m : m;
    s = s < 10 ? "0" + s : s;
    timer.value = `${m}:${s}`;
  }
  reset() {
    clearInterval(this.pointer);
    const mins = Math.floor(this.mins);
    const secs = (this.mins - mins) * 60;
    this.set(mins, secs);
    this.running = false;
    this.store();
  }
  update(ms) {
    const m = Math.floor((ms % (milliSecond * 60 * 60)) / (milliSecond * 60));
    const s = Math.floor((ms % (milliSecond * 60)) / milliSecond);
    this.set(m, s);
  }
  refresh(p) {
    const now = new Date().getTime();
    const msToDeadline = p.deadline - now;
    if (msToDeadline > 0) {
      p.update(msToDeadline);
      return;
    }
    p.reset();
    getNotifier().error("Round completed");
  }
  start(fresh) {
    if (fresh) {
      const now = new Date().getTime();
      const msToDeadline = this.mins * 60 * 1000;
      this.deadline = now + msToDeadline;
    }
    this.running = true;
    this.store();
    this.pointer = setInterval(this.refresh, 1000, this);
  }
  change(value) {
    this.mins += value;
    if (this.mins < 0.5) {
      this.mins = 0.5;
    }
    this.reset();
  }
}

function addTimerBehaviour(t) {
  document.getElementById("timer-start").addEventListener("click", () => {
    if (t.running) return;
    t.start(1);
  });
  document.getElementById("timer-stop").addEventListener("click", () => {
    t.reset();
  });
  document.getElementById("timer-inc").addEventListener("click", () => {
    if (!t.running) {
      t.change(0.5);
    }
  });
  document.getElementById("timer-dec").addEventListener("click", () => {
    if (!t.running) {
      t.change(-0.5);
    }
  });
}

export class Manager {
  constructor() {
    this.data = [];
    this.count = this.data.length;
  }
  store() {
    let stringData = JSON.stringify(this.data);
    localStorage.setItem(this.data[0].description, stringData);
  }
  render() {
    let renderedHTML = this.data
      .map((i) => {
        return i.render();
      })
      .join("");
    let elementId = this.data[0].description + "_list";
    document.getElementById(elementId).innerHTML = renderedHTML;
    this.addBehaviour();
  }
  addBehaviour() {
    for (let idx = 0; idx < this.data.length; ++idx) {
      const elementId = this.data[0].description + "_" + this.data[idx].id;
      const p = document.getElementById(elementId);
      p.addEventListener("click", () => {
        this.data[idx].toggle();
        this.store();
        p.classList.toggle("is-success");
        p.classList.toggle("is-danger");
      });
    }
  }
  active() {
    return this.data.filter(function (c) {
      return c.status;
    });
  }
  inactive() {
    return this.data.filter(function (c) {
      return !c.status;
    });
  }
}

export function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

export function randomLevel() {
  const max_level = 10;
  return Math.floor(Math.random() * max_level + 1);
}

export function randomStatus() {
  return Math.random() < 0.5;
}

export function getNotifier(seconds) {
  return new Notyf({
    duration: seconds * milliSecond,
    position: { x: "center", y: "top" },
    dismissible: true,
  });
}