'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var iconsVue = require('@ant-design/icons-vue');
var lodashEs = require('lodash-es');
require('../../../utils/index.cjs');
require('../../../hooks/index.cjs');
var index = require('../style/index.cjs');
var useConfigInject = require('../../config-provider/src/hooks/useConfigInject.cjs');
var index$3 = require('./TabNavList/index.cjs');
var index$4 = require('./TabPanelList/index.cjs');
var TabContext = require('./TabContext.cjs');
var props = require('./props.cjs');
var initDefaultProps = require('../../../utils/vue/initDefaultProps.cjs');
var propType = require('../../../utils/vue/propType.cjs');
var log = require('../../../utils/log.cjs');
var index$1 = require('../../../hooks/use-state/index.cjs');
var is = require('../../../utils/is.cjs');
var index$2 = require('../../../hooks/use-merged-state/index.cjs');
var _class = require('../../../utils/dom/class.cjs');

let uuid = 0;
var InternalTabs = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "InternalTabs",
  inheritAttrs: false,
  props: {
    ...initDefaultProps.initDefaultProps(props.tabsProps(), {
      tabPosition: "top",
      animated: {
        inkBar: true,
        tabPane: false
      }
    }),
    tabs: propType.arrayType()
  },
  slots: Object,
  // emits: ['tabClick', 'tabScroll', 'change', 'update:activeKey'],
  setup(props, {
    attrs,
    slots
  }) {
    log.devWarning(!(props.onPrevClick !== void 0) && !(props.onNextClick !== void 0), "Tabs", "`onPrevClick / @prevClick` and `onNextClick / @nextClick` has been removed. Please use `onTabScroll / @tabScroll` instead.");
    log.devWarning(!(props.tabBarExtraContent !== void 0), "Tabs", "`tabBarExtraContent` prop has been removed. Please use `rightExtra` slot instead.");
    log.devWarning(!(slots.tabBarExtraContent !== void 0), "Tabs", "`tabBarExtraContent` slot is deprecated. Please use `rightExtra` slot instead.");
    const {
      prefixCls,
      direction,
      size,
      rootPrefixCls,
      getPopupContainer
    } = useConfigInject.default("tabs", props);
    const [wrapSSR, hashId] = index.default(prefixCls);
    const rtl = vue.computed(() => direction.value === "rtl");
    const mergedAnimated = vue.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] = index$1.useState(false);
    vue.onMounted(() => {
      setMobile(is.isMobile());
    });
    const [mergedActiveKey, setMergedActiveKey] = index$2.useMergedState(() => {
      var _a;
      return (_a = props.tabs[0]) == null ? void 0 : _a.key;
    }, {
      value: vue.computed(() => props.activeKey),
      defaultValue: props.defaultActiveKey
    });
    const [activeIndex, setActiveIndex] = index$1.useState(() => props.tabs.findIndex((tab) => tab.key === mergedActiveKey.value));
    vue.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] = index$2.useMergedState(null, {
      value: vue.computed(() => props.id)
    });
    const mergedTabPosition = vue.computed(() => {
      if (mobile.value && !["left", "right"].includes(props.tabPosition))
        return "top";
      else
        return props.tabPosition;
    });
    vue.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);
    };
    TabContext.useProvideTabs({
      tabs: vue.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: () => vue.createVNode(iconsVue.CloseOutlined, null, null),
          addIcon: slots.addIcon ? slots.addIcon : () => vue.createVNode(iconsVue.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: _class.classNames(props.popupClassName, hashId.value)
      };
      if (renderTabBar) {
        tabNavBar = renderTabBar({
          ...tabNavBarProps,
          DefaultTabBar: index$3.default
        });
      } else {
        tabNavBar = vue.createVNode(index$3.default, tabNavBarProps, lodashEs.pick(slots, ["moreIcon", "leftExtra", "rightExtra", "tabBarExtraContent"]));
      }
      const pre = prefixCls.value;
      return wrapSSR(vue.createVNode("div", {
        ...attrs,
        "id": id,
        "class": _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, vue.createVNode(index$4.default, {
        "destroyInactiveTabPane": destroyInactiveTabPane,
        ...sharedProps,
        "animated": mergedAnimated.value
      }, null)]));
    };
  }
});

exports.default = InternalTabs;
//# sourceMappingURL=InternalTabs.cjs.map
