import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { useIdInjection } from "../../../hooks/use-id/index.mjs";
import { collapseContextKey } from "./constants.mjs";
import { inject, ref, computed, unref } from "vue";
const useCollapseItem = (props) => {
  const collapse = inject(collapseContextKey);
  const { namespace } = useNamespace("collapse");
  const focusing = ref(false);
  const isClick = ref(false);
  const idInjection = useIdInjection();
  const id = computed(() => idInjection.current++);
  const name = computed(() => {
    return props.name ?? `${namespace.value}-id-${idInjection.prefix}-${unref(id)}`;
  });
  const isActive = computed(() => collapse == null ? void 0 : collapse.activeNames.value.includes(unref(name)));
  const handleFocus = () => {
    setTimeout(() => {
      if (!isClick.value) focusing.value = true;
      else isClick.value = false;
    }, 50);
  };
  const handleHeaderClick = (e) => {
    var _a;
    if (props.disabled) return;
    if ((_a = e.target) == null ? void 0 : _a.closest("input, textarea, select")) return;
    collapse == null ? void 0 : collapse.handleItemClick(unref(name));
    focusing.value = false;
    isClick.value = true;
  };
  const handleEnterClick = (e) => {
    var _a;
    if ((_a = e.target) == null ? void 0 : _a.closest("input, textarea, select")) return;
    e.preventDefault();
    collapse == null ? void 0 : collapse.handleItemClick(unref(name));
  };
  return {
    focusing,
    id,
    isActive,
    handleFocus,
    handleHeaderClick,
    handleEnterClick
  };
};
const useCollapseItemDOM = (props, { focusing, isActive, id }) => {
  const ns = useNamespace("collapse");
  const rootKls = computed(() => [
    ns.b("item"),
    ns.is("active", unref(isActive)),
    ns.is("disabled", props.disabled)
  ]);
  const headKls = computed(() => [
    ns.be("item", "header"),
    ns.is("active", unref(isActive)),
    { focusing: unref(focusing) && !props.disabled }
  ]);
  const arrowKls = computed(() => [ns.be("item", "arrow"), ns.is("active", unref(isActive))]);
  return {
    itemTitleKls: computed(() => [ns.be("item", "title")]),
    arrowKls,
    headKls,
    rootKls,
    itemWrapperKls: computed(() => ns.be("item", "wrap")),
    itemContentKls: computed(() => ns.be("item", "content")),
    scopedContentId: computed(() => ns.b(`content-${unref(id)}`)),
    scopedHeadId: computed(() => ns.b(`head-${unref(id)}`))
  };
};
export {
  useCollapseItem,
  useCollapseItemDOM
};
