import { DT_MODE_ISLAND_TYPES as r } from "./mode-island-constants.js";
import { modeValidator as l } from "./validators.js";
import { getRootContrast as s, getOppositeMode as a, findParentMode as u, getRootMode as c } from "./utils.js";
import { createBlock as m, openBlock as h, resolveDynamicComponent as f, mergeProps as b, withCtx as p, renderSlot as M } from "vue";
import { _ as v } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const O = {
  name: "DtModeIsland",
  compatConfig: { MODE: 3 },
  provide() {
    return {
      dtModeIslandMode: () => this.computedMode
    };
  },
  inject: {
    parentModeIslandMode: {
      from: "dtModeIslandMode",
      default: null
    }
  },
  inheritAttrs: !1,
  props: {
    /**
     * Set this prop to render the mode island as a specific HTML element.
     * @type {String}
     * @values div, section, nav, article, aside, header, footer, main
     */
    as: {
      type: String,
      default: "div"
    },
    /**
     * The mode to apply to the island.
     * - 'inverted': Opposite of parent or root mode
     * - 'light': Always light mode
     * - 'dark': Always dark mode
     * @type {String}
     * @values inverted, light, dark
     */
    mode: {
      type: String,
      default: r.INVERTED,
      validator: l
    }
  },
  data() {
    return {
      currentContrast: s(),
      contrastObserver: null,
      modeObserver: null,
      elementRef: null,
      calculatedMode: null
      // Store calculated mode as reactive data
    };
  },
  computed: {
    isInverted() {
      return this.mode === r.INVERTED;
    },
    invertedAttribute() {
      return this.isInverted ? "" : null;
    },
    computedMode() {
      return this.mode === r.LIGHT || this.mode === r.DARK ? this.mode : this.mode === r.INVERTED && this.calculatedMode ? this.calculatedMode : this.calculateInvertedMode();
    }
  },
  beforeCreate() {
    if (this.$attrs && this.$attrs["data-dt-brand"])
      throw new Error("[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.");
  },
  mounted() {
    this.elementRef = this.$el, this.setupContrastObserver(), this.isInverted && (this.calculatedMode = this.calculateInvertedMode(), this.setupModeObserver()), this.currentContrast = s();
  },
  beforeUnmount() {
    this.contrastObserver && (this.contrastObserver.disconnect(), this.contrastObserver = null), this.modeObserver && (this.modeObserver.disconnect(), this.modeObserver = null);
  },
  methods: {
    calculateInvertedMode() {
      if (this.parentModeIslandMode) {
        const t = typeof this.parentModeIslandMode == "function" ? this.parentModeIslandMode() : this.parentModeIslandMode;
        return a(t);
      }
      if (this.elementRef) {
        const t = u(this.elementRef);
        return a(t);
      }
      return a(c());
    },
    setupContrastObserver() {
      this.contrastObserver = new MutationObserver((t) => {
        for (const e of t)
          e.type === "attributes" && e.attributeName === "data-dt-contrast" && (this.currentContrast = s());
      }), this.contrastObserver.observe(document.documentElement, {
        attributes: !0,
        attributeFilter: ["data-dt-contrast"]
      });
    },
    setupModeObserver() {
      var o;
      const t = {
        attributes: !0,
        attributeFilter: ["data-dt-mode"],
        subtree: !1
      };
      this.modeObserver = new MutationObserver((n) => {
        for (const d of n)
          d.type === "attributes" && d.attributeName === "data-dt-mode" && (this.calculatedMode = this.calculateInvertedMode());
      }), this.modeObserver.observe(document.documentElement, t);
      let e = (o = this.elementRef) == null ? void 0 : o.parentElement;
      for (; e; )
        e.hasAttribute("data-dt-mode") && this.modeObserver.observe(e, t), e = e.parentElement;
    }
  }
};
function I(t, e, o, n, d, i) {
  return h(), m(f(o.as), b({ class: "d-mode-island" }, t.$attrs, {
    "data-dt-mode": i.computedMode,
    "data-mode-island-inverted": i.invertedAttribute,
    "data-dt-contrast": d.currentContrast
  }), {
    default: p(() => [
      M(t.$slots, "default")
    ]),
    _: 3
  }, 16, ["data-dt-mode", "data-mode-island-inverted", "data-dt-contrast"]);
}
const g = /* @__PURE__ */ v(O, [["render", I]]);
export {
  g as default
};
//# sourceMappingURL=mode-island.js.map
