import { InobyComponentModule } from "@lib/inoby-module";
import * as $ from "jquery";

type FilterContex = "site" | "this";

class BlockFilterComponent extends InobyComponentModule {
  public metaboxId: string = "inoby-block-filter";

  public run() {
    $(".inoby-block-filter").each((i, el) => {
      this.initFilter($(el));
    });
  }

  public runAdmin() {
    //
  }

  private initFilter($filter: JQuery) {
    const context: FilterContex = $filter.data("context");
    const targetIds =
      "#" +
      $filter
        .find(".filter-item")
        .map((i, el) => $(el).data("target"))
        .toArray()
        .join(", #");

    $filter.find(".filter-item").on("click", function () {
      const targetId = "#" + $(this).data("target");

      if (context == "site") {
        $(targetIds).hide();
        $(targetId).show();
      }

      if (context == "this") {
        $filter.find(".inner-blocks").find(targetIds).hide();
        $filter.find(".inner-blocks " + targetId).show();
      }
    });
  }
}

new BlockFilterComponent().runOnReady();
