class BaseHTMLElement extends HTMLElement {
  connectedCallback() {
    this.#observeMutations();
    this.update();
  }
  #mutationObserver = null;

  #mutated = (records, observer) => {
    if (this.update) {
      this.#stopObservingMutations();
      this.update();
      this.#observeMutations();
    }
  };

  #observeMutations() {
    this.#stopObservingMutations();
    if (!this.#mutationObserver) {
      this.#mutationObserver = new MutationObserver(this.#mutated);
    }
    this.#mutationObserver.observe(this, { subtree: true, childList: true });
  }

  #stopObservingMutations() {
    if (this.#mutationObserver) {
      this.#mutationObserver.disconnect();
    }
  }
}
class FancyTable extends BaseHTMLElement {
  static tagName = "fancy-table";
  static observedAttributes = ["sort-column", "sort-direction", "filter-terms"];

  #sortColumn = NaN;
  #sortDirection = "ascending";
  #filterTerms = null;

  attributeChangedCallback(name, oldValue, newValue) {
    if (name == "sort-column") {
      this.#sortColumn = parseInt(newValue);
    } else if (name == "sort-direction") {
      this.#sortDirection = newValue;
    } else if (name == "filter-terms") {
      this.#filterTerms = newValue ? newValue.toLowerCase() : null;
    }
    this.update();
  }

  update() {
    this.#sortTable();
    this.#filter();
    this.#stripe();
  }

  #stripe() {
    let index = 0;
    this.querySelectorAll("tbody tr").forEach((tr) => {
      if (!tr.getAttribute("hidden")) {
        tr.setAttribute("data-stripe", index % 2 == 0 ? "even" : "odd");
        index++;
      } else {
        tr.removeAttribute("data-stripe");
      }
    });
  }

  #sortTable() {
    const tbody = this.querySelector("table tbody");
    if (!tbody) {
      return;
    }
    const rows = Array.from(tbody.querySelectorAll("tr"));
    rows.sort((a, b) => {
      let sortColumnA = a.querySelectorAll("td")[this.#sortColumn];
      let sortColumnB = b.querySelectorAll("td")[this.#sortColumn];

      if (this.#sortDirection == "descending") {
        const swap = sortColumnA;

        sortColumnA = sortColumnB;
        sortColumnB = swap;
      }
      if (sortColumnA) {
        if (sortColumnB) {
          return sortColumnA.textContent.localeCompare(sortColumnB.textContent);
        } else {
          return 1;
        }
      } else if (sortColumnB) {
        return -1;
      } else {
        return 0;
      }
    });
    rows.forEach((row) => tbody.appendChild(row));
  }
  #filter() {
    let indexShown = 0;
    this.querySelectorAll("tbody tr").forEach((tr) => {
      if (this.#filterTerms) {
        tr.setAttribute("hidden", true);
        tr.querySelectorAll("td").forEach((td) => {
          if (td.textContent.toLowerCase().indexOf(this.#filterTerms) != -1) {
            tr.removeAttribute("hidden");
          }
        });
      } else {
        tr.removeAttribute("hidden");
      }
    });
  }
}

class FancyTableFilter extends BaseHTMLElement {
  static tagName = "fancy-table-filter";
  static observedAttributes = ["fancy-table"];

  #tableId = null;

  attributeChangedCallback(name, oldValue, newValue) {
    if (name == "fancy-table") {
      this.#tableId = newValue;
    }
  }

  update() {
    const form = this.querySelector("form");
    if (form) {
      form.addEventListener("submit", this.#formSubmitted);
    }
  }

  #formSubmitted = (event) => {
    event.preventDefault();
    const fancyTable = document.getElementById(this.#tableId);
    if (!fancyTable) {
      if (this.#tableId) {
        console.warn(
          "fancy-table was %s, however no object with that id exists",
          this.#tableId
        );
      }
      return;
    }
    const formData = new FormData(event.target);
    const filterTerms = formData.get("filter-terms");
    if (filterTerms) {
      fancyTable.setAttribute("filter-terms", filterTerms);
    } else {
      fancyTable.removeAttribute("filter-terms");
    }
  };
}

class FancyTableSortButton extends BaseHTMLElement {
  static tagName = "fancy-table-sort-button";

  update() {
    const button = this.querySelector("button");
    if (!button) {
      return;
    }

    button.addEventListener("click", this.#sort);
  }

  #sort = (event) => {
    const fancyTable = this.closest(FancyTable.tagName);
    if (!fancyTable) {
      return;
    }

    const th = this.closest("th");
    if (!th) {
      return;
    }

    const tr = th.closest("tr");
    if (!tr) {
      return;
    }

    const direction = th.getAttribute("aria-sort");
    let myIndex = -1;
    tr.querySelectorAll("th").forEach((th, index) => {
      if (th.querySelector(FancyTableSortButton.tagName) == this) {
        myIndex = index;
      }
      th.removeAttribute("aria-sort");
    });
    if (myIndex == -1) {
      return;
    }
    const newDirection = direction == "ascending" ? "descending" : "ascending";

    th.setAttribute("aria-sort", newDirection);
    fancyTable.setAttribute("sort-direction", newDirection);
    fancyTable.setAttribute("sort-column", myIndex);
  };
}

class FancyTableAddForm extends BaseHTMLElement {
  static tagName = "fancy-table-add-form";

  static observedAttributes = ["fancy-table"];

  #tableId = null;

  attributeChangedCallback(name, oldValue, newValue) {
    if (name == "fancy-table") {
      this.#tableId = newValue;
    }
  }

  #addHero = (event) => {
    event.preventDefault();
    const fancyTable = document.getElementById(this.#tableId);
    if (!fancyTable) {
      if (this.#tableId) {
        console.warn(
          "fancy-table was %s, however no object with that id exists",
          this.#tableId
        );
      }
      return;
    }

    const tbody = fancyTable.querySelector("tbody");
    if (!tbody) {
      return;
    }

    const formData = new FormData(event.target);
    const name = formData.get("name");
    const power = formData.get("power");

    const tr = document.createElement("tr");
    tr.innerHTML = `<td>${name}</td><td>${power}</td>`;
    tbody.appendChild(tr);
    event.target.reset();
  };

  update() {
    const form = this.querySelector("form");
    if (form) {
      form.addEventListener("submit", this.#addHero);
    }
  }
}

window.customElements.define(FancyTable.tagName, FancyTable);
window.customElements.define(FancyTableFilter.tagName, FancyTableFilter);
window.customElements.define(
  FancyTableSortButton.tagName,
  FancyTableSortButton
);
window.customElements.define(FancyTableAddForm.tagName, FancyTableAddForm);