import { ArrowChevronDown16BlueIcon, ArrowChevronDown16BoldBlueIcon, ArrowChevronDownSmall16BlueIcon, ArrowChevronDownSmall16BoldBlueIcon } from '@cloudtower/icons-react';
import { Typo } from '../../core/Typo/index.js';
import { Dropdown, Menu } from 'antd';
import cs from 'classnames';
import React__default, { useRef, useMemo, useState, useEffect } from 'react';

const TabMenuStyle = "E_t160l1cm";
const TabMenuSubMenu = "E_t14npdqr";
const renderExpandArrow = (size, isBold) => {
  if (size === "medium" && !isBold) return /* @__PURE__ */React__default.createElement(ArrowChevronDown16BlueIcon, {
    className: "expand-arrow"
  });
  if (size === "medium" && isBold) return /* @__PURE__ */React__default.createElement(ArrowChevronDown16BoldBlueIcon, {
    className: "expand-arrow"
  });
  if (size === "small" && !isBold) return /* @__PURE__ */React__default.createElement(ArrowChevronDownSmall16BlueIcon, {
    className: "expand-arrow"
  });
  if (size === "small" && isBold) return /* @__PURE__ */React__default.createElement(ArrowChevronDownSmall16BoldBlueIcon, {
    className: "expand-arrow"
  });
};
const TabMenu = props => {
  const {
    tabs,
    onChange,
    selectedKey,
    size = "medium",
    theme = "default"
  } = props;
  const onChangeRef = useRef(onChange);
  const view = useMemo(() => {
    if (tabs.length === 0) return void 0;
    let result;
    tabs.some(tab => {
      var _a;
      if ("items" in tab) {
        const select = (_a = tab.items) == null ? void 0 : _a.find(item => item.key === selectedKey);
        result = select ? {
          key: tab.key,
          children: select.children,
          title: select.title,
          isAsync: tab.isAsync,
          skeleton: tab.skeleton,
          isOverview: select.isOverview
        } : void 0;
      } else if (tab.key === selectedKey) {
        result = {
          key: tab.key,
          children: tab.children,
          title: tab.title,
          isAsync: tab.isAsync,
          skeleton: tab.skeleton,
          isOverview: tab.isOverview
        };
      }
      return result;
    });
    if (!result) {
      setTimeout(() => {
        var _a;
        (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, tabs[0].key);
      }, 0);
      return tabs[0];
    }
    return result;
  }, [tabs, selectedKey]);
  const isMedium = size === "medium";
  const viewKey = view == null ? void 0 : view.key;
  const isAsync = view == null ? void 0 : view.isAsync;
  const [transitioned, setTransitioned] = useState(false);
  const viewKeyRef = useRef(view == null ? void 0 : view.key);
  useEffect(() => {
    setTransitioned(false);
    viewKeyRef.current = viewKey;
    const timeout = setTimeout(() => {
      setTransitioned(true);
    }, 320);
    return () => {
      clearTimeout(timeout);
    };
  }, [viewKey]);
  const renderTabContent = () => {
    if (!isAsync && (view == null ? void 0 : view.children)) return view.children;
    if (isAsync && transitioned && viewKey === viewKeyRef.current && (view == null ? void 0 : view.children)) return view.children;
    if (view == null ? void 0 : view.skeleton) return view.skeleton;
    return null;
  };
  return /* @__PURE__ */React__default.createElement("div", {
    className: cs(TabMenuStyle, "tab-menu", (view == null ? void 0 : view.isOverview) && "is-overview")
  }, /* @__PURE__ */React__default.createElement("div", {
    className: "tab-bar"
  }, tabs.map(tab => {
    var _a;
    const isSelected = (view == null ? void 0 : view.key) === tab.key;
    let typo = Typo.Label.l2_regular_title;
    if (isMedium && isSelected) {
      typo = Typo.Label.l1_bold_title;
    } else if (isMedium && !isSelected) {
      typo = Typo.Label.l1_regular_title;
    } else if (!isMedium && isSelected) {
      typo = Typo.Label.l2_bold_title;
    }
    if ("items" in tab) {
      return /* @__PURE__ */React__default.createElement(Dropdown, {
        key: tab.key,
        overlayClassName: TabMenuSubMenu,
        transitionName: "no-animation",
        overlay: /* @__PURE__ */React__default.createElement(Menu, {
          selectedKeys: [selectedKey],
          onClick: params => onChange == null ? void 0 : onChange(params.key)
        }, (_a = tab.items) == null ? void 0 : _a.map(item => /* @__PURE__ */React__default.createElement(Menu.Item, {
          "data-test": item.key,
          key: item.key
        }, item.title))),
        trigger: ["click"]
      }, /* @__PURE__ */React__default.createElement("span", {
        className: cs(["tab-menu-item", "tab-menu-item-group", isSelected && "tab-menu-item-selected", isMedium && "tab-menu-item-medium", theme === "light" && "tab-menu-item-light"])
      }, /* @__PURE__ */React__default.createElement("span", {
        className: cs(["main-title", isMedium ? Typo.Label.l1_regular_title : Typo.Label.l2_regular_title])
      }, tab.title), /* @__PURE__ */React__default.createElement("span", {
        className: cs(["sub-title", typo]),
        "data-test": isSelected ? view == null ? void 0 : view.title : tab.title
      }, /* @__PURE__ */React__default.createElement("svg", {
        className: "slash-arrow",
        width: "8",
        height: "8",
        viewBox: "0 0 8 8",
        fill: "none",
        xmlns: "http://www.w3.org/2000/svg"
      }, /* @__PURE__ */React__default.createElement("path", {
        d: "M4.81662 3.33203C5.15455 3.555 5.32351 3.66649 5.38224 3.80736C5.43358 3.93049 5.43358 4.06904 5.38224 4.19218C5.32351 4.33305 5.15455 4.44454 4.81662 4.66751L1.81921 6.64529C1.4159 6.91141 1.21424 7.04446 1.04715 7.03393C0.901576 7.02475 0.767265 6.95246 0.679429 6.836C0.578613 6.70234 0.578613 6.46074 0.578613 5.97755L0.578613 2.02199C0.578613 1.53879 0.578613 1.2972 0.679429 1.16353C0.767265 1.04708 0.901576 0.974785 1.04715 0.965607C1.21424 0.955073 1.4159 1.08813 1.81921 1.35425L4.81662 3.33203Z"
      })), /* @__PURE__ */React__default.createElement("span", {
        className: "sub-title-text"
      }, isSelected ? view == null ? void 0 : view.title : tab.title), renderExpandArrow(size, isSelected))));
    }
    return /* @__PURE__ */React__default.createElement("span", {
      className: cs(["tab-menu-item", isSelected && "tab-menu-item-selected", isMedium && "tab-menu-item-medium", theme === "light" && "tab-menu-item-light", typo]),
      key: tab.key,
      "data-test": tab.title,
      onClick: () => onChange == null ? void 0 : onChange(tab.key)
    }, tab.title);
  })), /* @__PURE__ */React__default.createElement("div", {
    key: selectedKey,
    className: "tab-content"
  }, renderTabContent()));
};
var TabMenu$1 = TabMenu;

export { TabMenu$1 as default };
