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