class Catalog {
   constructor() {
      const ok = this.initFields();
      if (!ok) return;
      this.initEvents();
   }

   initFields() {
      this.catalog = document.querySelector(".catalog-page");
      if (!this.catalog) return false;
      this.filterShowBtns = this.catalog.querySelectorAll(".show-filter");
      this.filterCloseBtns = this.catalog.querySelectorAll(".close-filter");
      this.filter = this.catalog.querySelector(".catalog-filter");

      return true;
   }

   initEvents() {
      this.filterShowBtns.forEach((btn) => {
         btn.addEventListener("click", this.showFilter);
      });
      this.filterCloseBtns.forEach((btn) => {
         btn.addEventListener("click", this.hideFilter);
      });
   }

   showFilter = () => {
      this.filter.classList.add("active");
   };

   hideFilter = () => {
      this.filter.classList.remove("active");
   };
}

export { Catalog };
