"use strict";
const jsxRuntime = require("./jsx-runtime-B3vWrP5x.cjs");
const React = require("react");
const Toggle = require("./Toggle-CAW20E9V.cjs");
const Center = require("./Center-5NJ61qfA.cjs");
const css = require("./css-Pf9qxhQ4.cjs");
const aggregator = require("./aggregator-Ca8xiVD2.cjs");
const resetSelection = (selected = "", tabs = []) => {
  var _a;
  if (tabs.length === 0)
    return void 0;
  return tabs.find((t) => t.tabKey === selected) != null ? selected : (_a = tabs[tabs.length - 1]) == null ? void 0 : _a.tabKey;
};
const rename = (key, title, tabs) => {
  title = title.trim();
  if (title.length === 0)
    return tabs;
  const t = tabs.find((t2) => t2.tabKey === key);
  if (t == null || t.name === title)
    return tabs;
  return tabs.map((t2) => t2.tabKey === key ? { ...t2, name: title } : t2);
};
const useStatic = ({
  tabs,
  content,
  selected,
  onSelect
}) => {
  var _a;
  const [value, onChange] = aggregator.usePurePassthrough({
    initial: selected ?? ((_a = tabs[0]) == null ? void 0 : _a.tabKey) ?? "",
    value: selected,
    onChange: onSelect
  });
  const valueRef = Toggle.useSyncedRef(selected ?? value);
  const handleSelect = React.useCallback(
    (key) => {
      onChange(key);
      if (valueRef.current == null)
        onSelect == null ? void 0 : onSelect(key);
    },
    [value, onSelect]
  );
  return {
    tabs,
    selected: value,
    content,
    onSelect: handleSelect
  };
};
const TabsContext = React.createContext({ tabs: [] });
const useTabsContext = () => React.useContext(TabsContext);
const Tabs = ({
  id,
  content,
  children,
  onSelect,
  selected,
  closable,
  tabs,
  onClose,
  onDragStart,
  onDragEnd,
  onCreate,
  onRename,
  emptyContent,
  className,
  onDragOver,
  onDrop,
  size = "medium",
  direction: dir = "y",
  ...props
}) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
  Center.Space,
  {
    id,
    empty: true,
    className: css.CSS(css.CSS.B("tabs"), className),
    onDragOver,
    onDrop,
    direction: dir,
    ...props,
    children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
      TabsContext.Provider,
      {
        value: {
          tabs,
          emptyContent,
          selected,
          closable,
          content: children ?? content,
          onSelect,
          onClose,
          onDragStart,
          onDragEnd,
          onRename,
          onCreate,
          onDrop
        },
        children: [
          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Selector, { size, direction: css.f.swap(dir) }),
          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Content, {})
        ]
      }
    )
  }
);
const Provider = TabsContext.Provider;
const Content = () => {
  const {
    tabs,
    selected,
    content: renderProp,
    emptyContent,
    onSelect
  } = useTabsContext();
  let content = null;
  const selectedTab = tabs.find((tab) => tab.tabKey === selected);
  if (selected == null || selectedTab == null)
    return emptyContent ?? null;
  if (renderProp != null) {
    if (typeof renderProp === "function")
      content = renderProp(selectedTab);
    else
      content = renderProp;
  } else if (selectedTab.content != null)
    content = selectedTab.content;
  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: css.CSS.B("tabs-content"), onClick: () => onSelect == null ? void 0 : onSelect(selected), children: content });
};
const CLS = "tabs-selector";
const Selector = ({
  className,
  size = "medium",
  direction = "x",
  ...props
}) => {
  const {
    tabs,
    selected,
    onSelect,
    onClose,
    closable,
    onDragEnd,
    onDragStart,
    onDrop,
    onRename,
    onCreate
  } = useTabsContext();
  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
    Center.Space,
    {
      className: css.CSS(css.CSS.B(CLS), css.CSS.size(size), className),
      align: "center",
      justify: "spaceBetween",
      onDrop,
      empty: true,
      direction,
      ...props,
      children: [
        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Center.Space, { direction, className: css.CSS.BE(CLS, "tabs"), empty: true, children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
          SelectorButton,
          {
            selected,
            onSelect,
            onClose,
            onDragStart,
            onDragEnd,
            onRename,
            closable: tab.closable ?? closable,
            size,
            ...tab
          },
          tab.tabKey
        )) }),
        onCreate != null && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Center.Space, { className: css.CSS.BE(CLS, "actions"), children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Toggle.Icon, { size, sharp: true, onClick: onCreate, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Toggle.m0.Add, {}) }) })
      ]
    }
  );
};
const SelectorButton = ({
  selected,
  onSelect,
  onClose,
  tabKey,
  name,
  onDragStart,
  onDragEnd,
  onRename,
  closable = true,
  icon,
  size,
  editable = true
}) => {
  const handleDragStart = React.useCallback(
    (e) => onDragStart == null ? void 0 : onDragStart(e, { tabKey, name }),
    [onDragStart, tabKey, name]
  );
  const handleDragEnd = React.useCallback(
    (e) => onDragEnd == null ? void 0 : onDragEnd(e, { tabKey, name }),
    [onDragEnd, tabKey, name]
  );
  const handleClose = React.useCallback(
    (e) => {
      e.stopPropagation();
      onClose == null ? void 0 : onClose(tabKey);
    },
    [onClose, tabKey]
  );
  const _onSelect = React.useCallback(() => onSelect == null ? void 0 : onSelect(tabKey), [onSelect, tabKey]);
  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
    Center.Pack,
    {
      size,
      className: css.CSS(
        css.CSS.BE(CLS, "btn"),
        onRename == null && css.CSS.BEM(CLS, "btn", "uneditable"),
        css.CSS.selected(selected === tabKey),
        closable && onClose != null && css.CSS.BEM(CLS, "btn", "closable")
      ),
      draggable: true,
      direction: "x",
      justify: "center",
      align: "center",
      onClick: _onSelect,
      onDragStart: handleDragStart,
      onDragEnd: handleDragEnd,
      bordered: false,
      rounded: false,
      children: [
        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
          Name,
          {
            name,
            tabKey,
            onRename,
            icon,
            editable,
            level: aggregator.ComponentSizeLevels[size]
          }
        ),
        closable && onClose != null && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Toggle.Icon, { onClick: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Toggle.m0.Close, { "aria-label": "pluto-tabs__close" }) })
      ]
    }
  );
};
const Name = ({
  onRename,
  name,
  tabKey,
  icon,
  editable = true,
  ...props
}) => {
  if (onRename == null || !editable) {
    if (icon != null)
      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Toggle.WithIcon, { startIcon: icon, noWrap: true, ...props, children: name });
    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Toggle.Text, { noWrap: true, ...props, children: name });
  }
  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
    Toggle.Editable,
    {
      onChange: (newText) => onRename(tabKey, newText),
      value: name,
      noWrap: true,
      ...props
    }
  );
};
const external = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  Content,
  Provider,
  Selector,
  Tabs,
  TabsContext,
  rename,
  resetSelection,
  useStatic,
  useTabsContext
}, Symbol.toStringTag, { value: "Module" }));
exports.Tabs = Tabs;
exports.external = external;
exports.rename = rename;
exports.resetSelection = resetSelection;
exports.useStatic = useStatic;
//# sourceMappingURL=external-CYRIymJR.cjs.map
