class ThemeSwitcher extends HTMLButtonElement {
  constructor() {
    super();

    // Bindings
    this.swap = this.swap.bind(this);
    this.ariaLabel = this.ariaLabel.bind(this);

    // Get static attributes
    this.dataAttr = this.getAttribute("dataAttr");
    this.mode1 = this.getAttribute("modes")
      .split(",")
      .map((index) => index.trim())[0];
    this.mode2 = this.getAttribute("modes")
      .split(",")
      .map((index) => index.trim())[1];

    // Grab dom elements
    this.body = document.querySelector("body");

    // Check for a default theme setting on the body
    if (this.body.getAttribute(this.dataAttr)) {
      this.current = this.body.getAttribute(this.dataAttr);
    }

    // sets the click listener to fire the swap function
    this.addEventListener("click", this.swap);
  }

  // Swaps the attribute
  ariaLabel(state) {
    this.setAttribute("aria-label", `${state} mode`);
  }

  // Fires all the attribute swapping
  swap() {
    if (this.current === this.mode1) {
      this.current = this.mode2;
      this.ariaLabel(this.mode1);
      this.body.setAttribute(this.dataAttr, `${this.mode2}`);
    } else {
      this.current = this.mode1;
      this.ariaLabel(this.mode2);
      this.body.setAttribute(this.dataAttr, `${this.mode1}`);
    }
  }

  // Observe current
  static get observedAttributes() {
    return ["current"];
  }

  // Get current
  get current() {
    return this.getAttribute("current");
  }

  // Set current
  set current(val) {
    return this.setAttribute("current", val);
  }
}
customElements.define("theme-switcher", ThemeSwitcher, { extends: "button" });