import { debounce } from "../utils/utils.js";

class Tabs {
   /**
    *
    * @param {HTMLElement} field
    */
   constructor(field) {
      this.field = field;

      if (field) {
         this.init();
      }
   }

   init() {
      const triggers = this.field.querySelectorAll(".zr-tabs__trigger");
      this.triggers = triggers;

      const contentWrapper = this.field.querySelector(".zr-tabs__contents");
      this.contentWrapper = contentWrapper;
      const contents = this.field.querySelectorAll(".zr-tabs__content");

      triggers.forEach((trigger, idx) => {
         trigger.addEventListener("click", () => {
            if (trigger.classList.contains("active")) return;
            const tabContent = contents[idx];

            triggers.forEach((el) => el.classList.remove("active"));
            contents.forEach((el) => el.classList.remove("active"));
            trigger.classList.add("active");
            tabContent.classList.add("active");
         });
      });
   }
}

export { Tabs };
