import { defineComponent as j, inject as z, computed as D, reactive as H, ref as h, watch as g, openBlock as s, createBlock as y, resolveDynamicComponent as F, normalizeStyle as K, unref as a, normalizeClass as l, withCtx as A, createElementVNode as r, renderSlot as u, createElementBlock as x, createCommentVNode as k, createVNode as M, Transition as X, withDirectives as q, vShow as G } from "vue";
import { useTheme as J } from "../../composables/useTheme.js";
import O from "../icon/Icon.vue.js";
import { injectAccordionKey as Q } from "../../composables/keys.js";
const R = { class: "flex-1 overflow-hidden" }, U = {
  key: 1,
  viewBox: "0 0 24 24",
  stroke: "currentColor",
  fill: "none",
  role: "presentation",
  class: "stroke-2 w-4 h-4"
}, W = ["left", "right"], Y = {
  tag: {
    type: String,
    default: "div"
  },
  disabled: Boolean,
  expanded: Boolean,
  showIcon: {
    type: Boolean,
    default: !0
  },
  icon: String,
  iconAlign: {
    type: String,
    default: "right"
  }
}, Z = {
  name: "XAccordionItem",
  validators: {
    iconAlign: W
  }
}, ie = /* @__PURE__ */ j({
  ...Z,
  props: Y,
  emits: ["expand", "change"],
  setup(w, { expose: I, emit: B }) {
    const i = w, p = B, f = z(Q, {
      isInsideAccordion: !1
    }), b = D(() => f.iconAlign || i.iconAlign), C = H({
      iconAlign: b
    }), n = h(!i.expanded), o = h(!0);
    g(() => i.expanded, () => {
      n.value = !i.expanded;
    }), g(n, (e, t) => {
      p("change", !e);
    });
    function E(e) {
      o.value && (e.style.height = "0px");
    }
    function $(e, t) {
      o.value ? (e.addEventListener("transitionend", t), setTimeout(() => {
        e.style.height = `${e.scrollHeight}px`;
      }, 1)) : t();
    }
    function S(e) {
      o.value ? e.style.removeProperty("height") : o.value = !0;
    }
    function L(e) {
      o.value && (e.style.height = `${e.scrollHeight}px`);
    }
    function P(e, t) {
      o.value ? (e.addEventListener("transitionend", t), setTimeout(() => {
        e.style.height = "0px";
      }, 1)) : t();
    }
    function _(e) {
      o.value ? e.style.removeProperty("height") : o.value = !0;
    }
    function m(e = !0) {
      o.value = e, n.value = !1;
    }
    function N(e = !0) {
      o.value = e, n.value = !0;
    }
    function v() {
      i.disabled || (n.value = !n.value);
    }
    function c(e = !0) {
      m(e), p("expand");
    }
    const { styles: T, classes: d, className: V } = J("AccordionItem", {}, {
      ...i,
      ...C
    }, { collapsed: n, isInsideAccordion: f.isInsideAccordion });
    return I({ toggle: v, open: m, close: N }), (e, t) => (s(), y(F(e.tag), {
      style: K(a(T)),
      class: l(a(V)),
      "aria-disabled": e.disabled,
      "aria-expanded": n.value ? "false" : "true"
    }, {
      default: A(() => [
        r("button", {
          type: "button",
          class: l(a(d).wrapper),
          onClick: v
        }, [
          r("div", R, [
            u(e.$slots, "default", {
              expand: c,
              collapsed: n.value
            })
          ]),
          e.showIcon ? (s(), x("div", {
            key: 0,
            class: l(a(d).icon)
          }, [
            e.icon ? (s(), y(O, {
              key: 0,
              icon: e.icon
            }, null, 8, ["icon"])) : (s(), x("svg", U, t[0] || (t[0] = [
              r("path", { d: "M19 9l-7 7-7-7" }, null, -1)
            ])))
          ], 2)) : k("", !0)
        ], 2),
        e.$slots.summary ? u(e.$slots, "summary", {
          key: 0,
          expand: c,
          collapsed: n.value
        }) : k("", !0),
        M(X, {
          onBeforeEnter: E,
          onEnter: $,
          onAfterEnter: S,
          onBeforeLeave: L,
          onLeave: P,
          onAfterLeave: _
        }, {
          default: A(() => [
            q(r("div", {
              class: l(a(d).content)
            }, [
              u(e.$slots, "content", {
                expand: c,
                collapsed: n.value
              })
            ], 2), [
              [G, !n.value]
            ])
          ]),
          _: 3
        })
      ]),
      _: 3
    }, 8, ["style", "class", "aria-disabled", "aria-expanded"]));
  }
});
export {
  ie as default
};
