import { defineComponent, computed, ref, watch, onBeforeUnmount, createVNode, Fragment, Transition, withDirectives, vShow } from 'vue';
import { CloseOutlined, FileTextOutlined } from '@ant-design/icons-vue';
import '../../../utils/index.mjs';
import '../../../vue-components/index.mjs';
import '../../../hooks/index.mjs';
import useConfigInject from '../../config-provider/src/hooks/useConfigInject.mjs';
import useStyle from '../style/index.mjs';
import floatButton from './FloatButton.mjs';
import { useProvideFloatButtonGroupContext } from './context.mjs';
import { floatButtonGroupProps } from './props.mjs';
import { floatButtonPrefixCls } from './constants.mjs';
import { initDefaultProps } from '../../../utils/vue/initDefaultProps.mjs';
import { useMergedState } from '../../../hooks/use-merged-state/index.mjs';
import { findDOMNode } from '../../../utils/vue/props.mjs';
import { canUseDom } from '../../../utils/dom/canUseDom.mjs';
import { classNames } from '../../../utils/dom/class.mjs';
import { getTransitionProps } from '../../../vue-components/transition/src/transition.mjs';

var floatButtonGroup = /* @__PURE__ */ defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "AFloatButtonGroup",
  inheritAttrs: false,
  props: initDefaultProps(floatButtonGroupProps(), {
    type: "default",
    shape: "circle"
  }),
  setup(props, {
    attrs,
    slots,
    emit
  }) {
    const {
      prefixCls,
      direction
    } = useConfigInject(floatButtonPrefixCls, props);
    const [wrapSSR, hashId] = useStyle(prefixCls);
    const [open, setOpen] = useMergedState(false, {
      value: computed(() => props.open)
    });
    const floatButtonGroupRef = ref(null);
    const floatButtonRef = ref(null);
    useProvideFloatButtonGroupContext({
      shape: computed(() => props.shape)
    });
    const hoverTypeAction = {
      onMouseenter() {
        var _a;
        setOpen(true);
        emit("update:open", true);
        (_a = props.onOpenChange) == null ? void 0 : _a.call(props, true);
      },
      onMouseleave() {
        var _a;
        setOpen(false);
        emit("update:open", false);
        (_a = props.onOpenChange) == null ? void 0 : _a.call(props, false);
      }
    };
    const hoverAction = computed(() => {
      return props.trigger === "hover" ? hoverTypeAction : {};
    });
    const handleOpenChange = () => {
      var _a;
      const nextOpen = !open.value;
      emit("update:open", nextOpen);
      (_a = props.onOpenChange) == null ? void 0 : _a.call(props, nextOpen);
      setOpen(nextOpen);
    };
    const onClick = (e) => {
      var _a, _b, _c;
      if ((_a = floatButtonGroupRef.value) == null ? void 0 : _a.contains(e.target)) {
        if ((_b = findDOMNode(floatButtonRef.value)) == null ? void 0 : _b.contains(e.target))
          handleOpenChange();
        return;
      }
      setOpen(false);
      emit("update:open", false);
      (_c = props.onOpenChange) == null ? void 0 : _c.call(props, false);
    };
    watch(computed(() => props.trigger), (value) => {
      if (!canUseDom())
        return;
      document.removeEventListener("click", onClick);
      if (value === "click")
        document.addEventListener("click", onClick);
    }, {
      immediate: true
    });
    onBeforeUnmount(() => {
      document.removeEventListener("click", onClick);
    });
    return () => {
      var _a;
      const {
        shape = "circle",
        type = "default",
        tooltip,
        description,
        trigger
      } = props;
      const groupPrefixCls = `${prefixCls.value}-group`;
      const groupCls = classNames(groupPrefixCls, hashId.value, attrs.class, {
        [`${groupPrefixCls}-rtl`]: direction.value === "rtl",
        [`${groupPrefixCls}-${shape}`]: shape,
        [`${groupPrefixCls}-${shape}-shadow`]: !trigger
      });
      const wrapperCls = classNames(hashId.value, `${groupPrefixCls}-wrap`);
      const transitionProps = getTransitionProps(`${groupPrefixCls}-wrap`);
      return wrapSSR(createVNode("div", {
        "ref": floatButtonGroupRef,
        ...attrs,
        "class": groupCls,
        ...hoverAction.value
      }, [trigger && ["click", "hover"].includes(trigger) ? createVNode(Fragment, null, [createVNode(Transition, transitionProps, {
        default: () => [withDirectives(createVNode("div", {
          "class": wrapperCls
        }, [slots.default && slots.default()]), [[vShow, open.value]])]
      }), createVNode(floatButton, {
        "ref": floatButtonRef,
        "type": type,
        "shape": shape,
        "tooltip": tooltip,
        "description": description
      }, {
        icon: () => {
          var _a2, _b;
          return open.value ? ((_a2 = slots.closeIcon) == null ? void 0 : _a2.call(slots)) || createVNode(CloseOutlined, null, null) : ((_b = slots.icon) == null ? void 0 : _b.call(slots)) || createVNode(FileTextOutlined, null, null);
        },
        tooltip: slots.tooltip,
        description: slots.description
      })]) : (_a = slots.default) == null ? void 0 : _a.call(slots)]));
    };
  }
});

export { floatButtonGroup as default };
//# sourceMappingURL=FloatButtonGroup.mjs.map
