import { MoreMenu16BlueIcon, MoreMenu16GrayIcon } from '@cloudtower/icons-react';
import { cx } from '@linaria/core';
import { Dropdown, Menu } from 'antd';
import React__default, { useRef, useState, useMemo, useLayoutEffect } from 'react';
import Icon from '../Icon/index.js';
import { Typo } from '../Typo/index.js';
import { TabMenuWrapper, MoreThanTooltipStyle, TabTitleElStyle, IconStyle } from './Tab.style.js';
import { ActiveTabType } from './Tab.type.js';
import { useTabAdaptiveLayout } from './useTabAdaptiveLayout.js';

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

export { Tab };
