import { defineComponent, computed, onMounted, watchEffect, createVNode } from 'vue';
import { CloseOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { pick } from 'lodash-es';
import '../../../utils/index.mjs';
import '../../../hooks/index.mjs';
import useStyle from '../style/index.mjs';
import useConfigInject from '../../config-provider/src/hooks/useConfigInject.mjs';
import TabNavList from './TabNavList/index.mjs';
import TabPanelList from './TabPanelList/index.mjs';
import { useProvideTabs } from './TabContext.mjs';
import { tabsProps } from './props.mjs';
import { initDefaultProps } from '../../../utils/vue/initDefaultProps.mjs';
import { arrayType } from '../../../utils/vue/propType.mjs';
import { devWarning } from '../../../utils/log.mjs';
import { useState } from '../../../hooks/use-state/index.mjs';
import { isMobile } from '../../../utils/is.mjs';
import { useMergedState } from '../../../hooks/use-merged-state/index.mjs';
import { classNames } from '../../../utils/dom/class.mjs';

let uuid = 0;
var InternalTabs = /* @__PURE__ */ defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "InternalTabs",
  inheritAttrs: false,
  props: {
    ...initDefaultProps(tabsProps(), {
      tabPosition: "top",
      animated: {
        inkBar: true,
        tabPane: false
      }
    }),
    tabs: arrayType()
  },
  slots: Object,
  // emits: ['tabClick', 'tabScroll', 'change', 'update:activeKey'],
  setup(props, {
    attrs,
    slots
  }) {
    devWarning(!(props.onPrevClick !== void 0) && !(props.onNextClick !== void 0), "Tabs", "`onPrevClick / @prevClick` and `onNextClick / @nextClick` has been removed. Please use `onTabScroll / @tabScroll` instead.");
    devWarning(!(props.tabBarExtraContent !== void 0), "Tabs", "`tabBarExtraContent` prop has been removed. Please use `rightExtra` slot instead.");
    devWarning(!(slots.tabBarExtraContent !== void 0), "Tabs", "`tabBarExtraContent` slot is deprecated. Please use `rightExtra` slot instead.");
    const {
      prefixCls,
      direction,
      size,
      rootPrefixCls,
      getPopupContainer
    } = useConfigInject("tabs", props);
    const [wrapSSR, hashId] = useStyle(prefixCls);
    const rtl = computed(() => direction.value === "rtl");
    const mergedAnimated = computed(() => {
      const {
        animated,
        tabPosition
      } = props;
      if (animated === false || ["left", "right"].includes(tabPosition)) {
        return {
          inkBar: false,
          tabPane: false
        };
      } else if (animated === true) {
        return {
          inkBar: true,
          tabPane: true
        };
      } else {
        return {
          inkBar: true,
          tabPane: false,
          ...typeof animated === "object" ? animated : {}
        };
      }
    });
    const [mobile, setMobile] = useState(false);
    onMounted(() => {
      setMobile(isMobile());
    });
    const [mergedActiveKey, setMergedActiveKey] = useMergedState(() => {
      var _a;
      return (_a = props.tabs[0]) == null ? void 0 : _a.key;
    }, {
      value: computed(() => props.activeKey),
      defaultValue: props.defaultActiveKey
    });
    const [activeIndex, setActiveIndex] = useState(() => props.tabs.findIndex((tab) => tab.key === mergedActiveKey.value));
    watchEffect(() => {
      var _a;
      let newActiveIndex = props.tabs.findIndex((tab) => tab.key === mergedActiveKey.value);
      if (newActiveIndex === -1) {
        newActiveIndex = Math.max(0, Math.min(activeIndex.value, props.tabs.length - 1));
        setMergedActiveKey((_a = props.tabs[newActiveIndex]) == null ? void 0 : _a.key);
      }
      setActiveIndex(newActiveIndex);
    });
    const [mergedId, setMergedId] = useMergedState(null, {
      value: computed(() => props.id)
    });
    const mergedTabPosition = computed(() => {
      if (mobile.value && !["left", "right"].includes(props.tabPosition))
        return "top";
      else
        return props.tabPosition;
    });
    onMounted(() => {
      if (!props.id) {
        setMergedId(`rc-tabs-${process.env.NODE_ENV === "test" ? "test" : uuid}`);
        uuid += 1;
      }
    });
    const onInternalTabClick = (key, e) => {
      var _a, _b;
      (_a = props.onTabClick) == null ? void 0 : _a.call(props, key, e);
      const isActiveChanged = key !== mergedActiveKey.value;
      setMergedActiveKey(key);
      if (isActiveChanged)
        (_b = props.onChange) == null ? void 0 : _b.call(props, key);
    };
    useProvideTabs({
      tabs: computed(() => props.tabs),
      prefixCls
    });
    return () => {
      const {
        id,
        type,
        tabBarGutter,
        tabBarStyle,
        locale,
        destroyInactiveTabPane,
        renderTabBar = slots.renderTabBar,
        onTabScroll,
        hideAdd,
        centered
      } = props;
      const sharedProps = {
        id: mergedId.value,
        activeKey: mergedActiveKey.value,
        animated: mergedAnimated.value,
        tabPosition: mergedTabPosition.value,
        rtl: rtl.value,
        mobile: mobile.value
      };
      let editable;
      if (type === "editable-card") {
        editable = {
          onEdit: (editType, {
            key,
            event
          }) => {
            var _a;
            (_a = props.onEdit) == null ? void 0 : _a.call(props, editType === "add" ? event : key, editType);
          },
          removeIcon: () => createVNode(CloseOutlined, null, null),
          addIcon: slots.addIcon ? slots.addIcon : () => createVNode(PlusOutlined, null, null),
          showAdd: hideAdd !== true
        };
      }
      let tabNavBar;
      const tabNavBarProps = {
        ...sharedProps,
        moreTransitionName: `${rootPrefixCls.value}-slide-up`,
        editable,
        locale,
        tabBarGutter,
        onTabClick: onInternalTabClick,
        onTabScroll,
        style: tabBarStyle,
        getPopupContainer: getPopupContainer.value,
        popupClassName: classNames(props.popupClassName, hashId.value)
      };
      if (renderTabBar) {
        tabNavBar = renderTabBar({
          ...tabNavBarProps,
          DefaultTabBar: TabNavList
        });
      } else {
        tabNavBar = createVNode(TabNavList, tabNavBarProps, pick(slots, ["moreIcon", "leftExtra", "rightExtra", "tabBarExtraContent"]));
      }
      const pre = prefixCls.value;
      return wrapSSR(createVNode("div", {
        ...attrs,
        "id": id,
        "class": classNames(pre, `${pre}-${mergedTabPosition.value}`, {
          [hashId.value]: true,
          [`${pre}-${size.value}`]: size.value,
          [`${pre}-card`]: ["card", "editable-card"].includes(type),
          [`${pre}-editable-card`]: type === "editable-card",
          [`${pre}-centered`]: centered,
          [`${pre}-mobile`]: mobile.value,
          [`${pre}-editable`]: type === "editable-card",
          [`${pre}-rtl`]: rtl.value
        }, attrs.class)
      }, [tabNavBar, createVNode(TabPanelList, {
        "destroyInactiveTabPane": destroyInactiveTabPane,
        ...sharedProps,
        "animated": mergedAnimated.value
      }, null)]));
    };
  }
});

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