'use strict';

var iconsReact = require('@cloudtower/icons-react');
var core = require('@linaria/core');
var antd = require('antd');
var React = require('react');
var index$1 = require('../Icon/index.js');
var index = require('../Typo/index.js');
var Tab_style = require('./Tab.style.js');
var Tab_type = require('./Tab.type.js');
var useTabAdaptiveLayout = require('./useTabAdaptiveLayout.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

const getSelectedStyle = (key, type, selectedKey, activeTabType) => {
  return key === selectedKey && activeTabType === type ? ["__selected", index.Typo.Label.l1_bold_title] : [index.Typo.Label.l1_regular];
};
const Tab = props => {
  const {
    className,
    contentClassName,
    tabs,
    onChange,
    selectedKey,
    extraSlot,
    size = "medium"
  } = props;
  const tabsRef = React.useRef(null);
  const extraSlotRef = React.useRef(null);
  const [isClickedMoreTabItem, setIsClickedMoreTabItem] = React.useState(false);
  const allTabs = React.useMemo(() => {
    return tabs.reduce((map, tab) => {
      map.set(tab.key, tab);
      return map;
    }, /* @__PURE__ */new Map([]));
  }, [tabs]);
  const selectedTab = React.useMemo(() => allTabs.get(selectedKey), [allTabs, selectedKey]);
  const moreTabs = useTabAdaptiveLayout.useTabAdaptiveLayout(tabs, tabsRef, extraSlotRef, selectedKey);
  const activeTabType = React.useMemo(() => {
    if (moreTabs == null ? void 0 : moreTabs.find(tab => tab.key === (selectedTab == null ? void 0 : selectedTab.key))) {
      return Tab_type.ActiveTabType.More;
    }
    if ((selectedTab == null ? void 0 : selectedTab.key) && allTabs.get(selectedTab.key)) {
      return Tab_type.ActiveTabType.Common;
    }
  }, [moreTabs, allTabs, selectedTab == null ? void 0 : selectedTab.key]);
  React.useLayoutEffect(() => {
    var _a;
    if (!allTabs.get(selectedKey) && ((_a = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _a.key)) {
      onChange == null ? void 0 : onChange(tabs[0].key);
    }
  }, [allTabs, onChange, selectedKey, tabs]);
  return /* @__PURE__ */React__default.default.createElement(Tab_style.TabMenuWrapper, {
    className: core.cx(className, size)
  }, /* @__PURE__ */React__default.default.createElement("div", {
    className: "tab-bar"
  }, /* @__PURE__ */React__default.default.createElement("div", {
    ref: tabsRef,
    className: "common-tab-bar"
  }, /* tab items */
  tabs.map(tab => /* @__PURE__ */React__default.default.createElement("span", {
    className: core.cx("tab-item-title", "common", ...getSelectedStyle(tab.key, Tab_type.ActiveTabType.Common, selectedKey, activeTabType)),
    key: tab.key,
    onClick: () => onChange == null ? void 0 : onChange(tab.key)
  }, typeof tab.title === "function" ? tab.title({
    isActive: tab.key === selectedKey
  }) : tab.title)), /* more tab items */
  moreTabs.length > 0 && /* @__PURE__ */React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */React__default.default.createElement(antd.Dropdown, {
    trigger: ["click"],
    overlayClassName: Tab_style.MoreThanTooltipStyle,
    onVisibleChange: visible => setIsClickedMoreTabItem(visible),
    getPopupContainer: triggerNode => document.querySelector(".tab-bar") || triggerNode,
    overlay: /* @__PURE__ */React__default.default.createElement(antd.Menu, {
      className: "menu-wrapper",
      onClick: params => {
        setIsClickedMoreTabItem(false);
        onChange == null ? void 0 : onChange(params.key);
      }
    }, moreTabs.map(tab => {
      return /* @__PURE__ */React__default.default.createElement(antd.Menu.Item, {
        className: core.cx("tab-menu-item", ...getSelectedStyle(tab.key, Tab_type.ActiveTabType.More, selectedKey, activeTabType)),
        key: tab.key
      }, typeof tab.title === "function" ? tab.title({
        isActive: tab.key === selectedKey
      }) : tab.title);
    }))
  }, /* @__PURE__ */React__default.default.createElement("span", {
    className: core.cx("tab-item-title", "more", Tab_style.TabTitleElStyle, activeTabType === Tab_type.ActiveTabType.More && "__selected", activeTabType === Tab_type.ActiveTabType.More ? index.Typo.Label.l1_bold_title : index.Typo.Label.l1_regular)
  }, /* @__PURE__ */React__default.default.createElement(index$1, {
    className: Tab_style.IconStyle,
    hoverSrc: iconsReact.MoreMenu16BlueIcon,
    src: iconsReact.MoreMenu16GrayIcon,
    active: isClickedMoreTabItem
  }), activeTabType === Tab_type.ActiveTabType.More && /* @__PURE__ */React__default.default.createElement("span", {
    className: "tab-title-text"
  }, typeof (selectedTab == null ? void 0 : selectedTab.title) === "function" ? selectedTab == null ? void 0 : selectedTab.title({
    isActive: true
  }) : selectedTab == null ? void 0 : selectedTab.title))), extraSlot && /* @__PURE__ */React__default.default.createElement("span", {
    className: "E_ckaaqep"
  }))), extraSlot && /* @__PURE__ */React__default.default.createElement("div", {
    ref: extraSlotRef
  }, extraSlot)), tabs.map(tab => /* @__PURE__ */React__default.default.createElement("div", {
    style: {
      display: tab.key === selectedKey ? "block" : "none"
    },
    key: tab.key,
    className: contentClassName
  }, tab == null ? void 0 : tab.children)));
};

exports.Tab = Tab;
