import {
  select_default
} from "./chunk-I6Y4O3RR.js";

// dom/toggleButtons.ts
var activeColor = "#1575ad";
var inactiveColor = "#757373";
var Tabs = class {
  constructor(opts) {
    this.opts = this.validateOpts(opts);
    this.tabs = opts.tabs;
    this.dom = {
      holder: opts.holder
    };
    this.defaultTabWidth = 90;
    setRenderers(this);
  }
  validateOpts(opts) {
    if (!opts.holder) throw `missing opts.holder for Tabs()`;
    if (!Array.isArray(opts.tabs)) throw `invalid opts.tabs array for Tabs()`;
    if (!opts.tabsPosition) opts.tabsPosition = "horizontal";
    if (opts.tabsPosition != "horizontal" && opts.tabsPosition != "vertical")
      throw `Invalid .tabsPosition arg. Must be either vertical or horizontal`;
    if (!opts.linePosition) {
      opts.linePosition = opts.tabsPosition == "horizontal" ? "bottom" : "right";
    }
    if (opts.linePosition != "bottom" && opts.linePosition != "top" && opts.linePosition != "right" && opts.linePosition != "left")
      throw `Invalid .linePosition arg. Must be either bottom, top, right, or left`;
    return opts;
  }
  async main() {
    try {
      await this.render();
    } catch (e) {
      if (e.stack) console.log(e.stack);
      else throw e;
    }
  }
};
function setRenderers(self) {
  self.render = async () => {
    const has_active_tab = self.tabs.find((tab) => tab.active);
    if (!has_active_tab) self.tabs[0].active = true;
    const textAlign = self.opts.linePosition == "bottom" || self.opts.linePosition == "top" ? "center" : self.opts.linePosition;
    self.dom.tabsHolder = self.dom.holder.append("div").style(`border-${self.opts.linePosition}`, "0.5px solid #1575ad");
    if (!self.dom.contentHolder && !self.opts.noContent) {
      self.dom.contentHolder = self.opts.contentHolder || self.dom.holder.append("div");
    }
    if (self.opts.tabsPosition == "vertical") {
      self.dom.tabsHolder.style("display", "inline-grid").style("align-items", "start").style("gap", self.opts.gap || "");
      self.dom.contentHolder.style("display", "inline-block").style("vertical-align", "top").style("position", "relative");
    } else self.dom.tabsHolder.style("display", "inline-block");
    await self.dom.tabsHolder.selectAll("button").data(self.tabs).enter().append("button").attr("data-testid", (d) => d.testid || "sja_toggle_button").attr("class", "sj-toggle-button").classed("sjpp-active", (tab) => tab.active).style("padding", "0px").style("width", (tab) => tab.width ? `${tab.width}px` : "fit-content").style("min-width", (tab) => tab.width ? null : Math.max(self.defaultTabWidth)).style("border", "none").style("background-color", "transparent").style("display", (tab) => {
      if (!tab.isVisible || tab.isVisible()) return self.opts.tabsPosition == "vertical" ? "flex" : "inline-grid";
      else return "none";
    }).property("disabled", (tab) => tab.disabled ? tab.disabled() : false).each(async function(tab) {
      if (tab.active) {
        this.focus();
        this.blur();
      }
      const isVisible = tab.isVisible ? tab.isVisible() : true;
      tab.wrapper = select_default(this).style("cursor", isVisible && tab.disabled?.() ? "not-allowed" : "pointer");
      if (self.opts.linePosition == "right") tab.wrapper.style("justify-self", "end");
      if (self.opts.linePosition == "left") tab.wrapper.style("justify-self", "start");
      if (self.opts.linePosition == "top" || self.opts.linePosition == "left") {
        tab.line = tab.wrapper.append("div").style("display", self.opts.linePosition == "left" ? "inline-flex" : "flex");
        tab.tab = tab.wrapper.append("div").style("display", self.opts.linePosition == "left" ? "inline-block" : "block");
      } else {
        tab.tab = tab.wrapper.append("div").style("display", self.opts.linePosition == "right" ? "inline-block" : "block");
        tab.line = tab.wrapper.append("div").style("display", self.opts.linePosition == "right" ? "inline-flex" : "flex");
      }
      tab.tab.attr("data-testid", `sjpp-toggle_button-text-${tab.label.toLowerCase().replace(/\s/g, "-")}`).style("color", tab.active ? activeColor : inactiveColor).style("text-align", textAlign).style("padding", "5px").html(tab.label);
      tab.line.style("background-color", activeColor).style("visibility", tab.active ? "visible" : "hidden");
      if (self.opts.linePosition == "top" || self.opts.linePosition == "bottom") {
        tab.line.style("height", "8px").style("padding", "0px 5px");
      } else {
        tab.line.style("align-self", "stretch").style("padding", "5px 0px").html('<span style="width: 8px";>&nbsp</span>');
      }
      if (self.dom.contentHolder) {
        tab.contentHolder = self.dom.contentHolder.append("div").style("display", tab.active ? "block" : "none");
        if (self.opts.tabsPosition == "horizontal" && !self.opts.noTopContentStyle) {
          tab.contentHolder.style("padding-top", "10px").style("margin-top", "10px");
        }
      }
      if (tab.active && tab.callback) await tab.callback(event, tab);
      tab.wrapper.on("mouseenter", () => {
        tab.tab.style("color", tab.active ? inactiveColor : activeColor);
      }).on("mouseleave", () => {
        tab.tab.style("color", tab.active ? activeColor : inactiveColor);
      });
    }).on("click", async (event2, tab) => {
      for (const t of self.tabs) {
        if (self.opts.hideOnDblClick && t.active == true && t === tab) {
          t.active = false;
          continue;
        }
        t.active = t === tab;
      }
      const activeTabIndex2 = self.tabs.findIndex((t) => t.active);
      self.update(activeTabIndex2);
      if (tab.callback) await tab.callback(event2, tab);
    }).on("keydown", async function(event2, tab) {
      if (event2.target.tagName != "BUTTON") return;
      if (event2.key == "Escape") {
        return false;
      } else if (event2.key == "Enter") {
        if (tab.keydownCallback) tab.keydownCallback(event2, tab);
      }
    });
    const activeTabIndex = self.tabs.findIndex((t) => t.active);
    self.update(activeTabIndex);
  };
  self.update = (activeTabIndex = 0) => {
    self.tabs.forEach((tab, i) => {
      tab.active = activeTabIndex === i;
    });
    self.dom.tabsHolder.selectAll("button").data(self.tabs).classed("sjpp-active", (tab) => tab.active).each((tab) => {
      const isVisible = tab.isVisible ? tab.isVisible() : true;
      tab.wrapper.classed("sjpp-active", tab.active);
      if (tab.isVisible) tab.wrapper.style("display", isVisible ? "" : "none");
      if (tab.contentHolder) tab.contentHolder.style("display", tab.active ? "block" : "none");
      tab.tab.style("color", tab.active ? activeColor : inactiveColor);
      tab.line.style("visibility", tab.active ? "visible" : "hidden");
      tab.tab.html(tab.label);
    });
  };
}

export {
  Tabs
};
//# sourceMappingURL=chunk-HBW42TDT.js.map
