import { serverEndpoint } from "/src/js/templates.js";
import { request, isStatusValid } from "/src/js/helpers.js";

export default class Navigation {
  constructor() {
    this.hamburger = document.querySelector(".hamburger");
    this.header = document.querySelector(".header");
    this.heroesEndpoint = `${serverEndpoint}/heroes`;
    this.loader = document.querySelector(".loader-wrapper");
  }

  init() {
    this.handleHamburger();
    this.header.addEventListener("click", this.handleClick);
  }

  handleClick(e) {
    e.preventDefault();
    switch (e.target.id) {
      case "home":
        {
          history.pushState({ id: "primaryHTML" }, "/index", "/index.html");
          document.body.classList.remove("open");
        }
        break;

      case "addHero":
        {
          history.pushState({ id: "addHeroHTML" }, "/form", "/addHero.html");
          document.body.classList.remove("open");
        }
        break;

      case "editHero":
        {
          history.pushState({ id: "editHeroHTML" }, "/index", "/editHero.html");
          document.body.classList.remove("open");
        }
        break;

      case "deleteHero":
        {
          history.pushState(
            { id: "deleteHeroHTML" },
            "/index",
            "/deleteHero.html"
          );
          document.body.classList.remove("open");
        }
        break;

      case "clearDatabase":
        {
          await this.clearDatabase();
          localStorage.clear();
          document.body.classList.remove("open");
        }
        break;
    }
  }

  handleHamburger() {
    this.hamburger.addEventListener("click", this.toggleOpen);
  }

  toggleOpen() {
    document.body.classList.toggle("open");
  }

  async clearDatabase() {
    try {
      this.loader.classList.add("loading");
      const response = await request(`${this.heroesEndpoint}`, "DELETE");
      if (!isStatusValid(response.status)) {
        this.loader.classList.remove("loading");
        return;
      }
      const heroesData = await response.json();
      history.pushState({ id: "primaryHTML" }, "/index", "/index.html");
      console.log(heroesData);
      this.loader.classList.remove("loading");
      alert(`Database has been cleared`);
    } catch (error) {
      console.log(`Error when fetching hero: ${error}`);
    }
  }
}