import { jsxs, jsx } from "react/jsx-runtime";
import { useMemo, createElement } from "react";
import { CustomTabPanel } from "./TabPanel.js";
/* empty css                 */
import Box from "../../node_modules/@mui/material/Box/Box.js";
import Tabs$1 from "../../node_modules/@mui/material/Tabs/Tabs.js";
import Tab from "../../node_modules/@mui/material/Tab/Tab.js";
function Tabs({
  tabPanels,
  tabNames,
  value,
  onChange,
  orientation = "horizontal",
  isDisabled,
  tabPanelStyle,
  remountOnTabChange = true,
  isBlueBg = false,
  className,
  style,
  "data-testid": dataTestId,
  ...args
}) {
  var _a;
  const tabClassName = useMemo(() => "ia-styles ia-tab", []);
  const containerClassName = useMemo(() => {
    let retVal = "ia-styles ia-tabContainer";
    if (orientation === "vertical") retVal += " ia-tabs-vertical";
    else retVal += " ia-tabs-horizontal";
    return retVal;
  }, [orientation]);
  const selectedValue = typeof value === "number" ? ((_a = tabNames[value]) == null ? void 0 : _a.value) ?? String(value) : String(value);
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: className ? `${containerClassName} ${className}`.trim() : containerClassName,
      "data-testid": dataTestId,
      style,
      children: [
        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
          Tabs$1,
          {
            className: `ia-styles ia-tabList ${isBlueBg ? "ia-tabList-blueBg" : ""}`.trim(),
            orientation,
            value: selectedValue,
            onChange,
            ...args,
            children: tabNames.map((tab) => /* @__PURE__ */ createElement(
              Tab,
              {
                disableRipple: true,
                ...tab,
                key: tab.value,
                className: tab.value === selectedValue ? `${tabClassName} ia-activeTabHeader` : tabClassName,
                disabled: tab.disabled ?? isDisabled
              }
            ))
          }
        ) }),
        /* @__PURE__ */ jsx("div", { className: "impact-tab-panel", style: tabPanelStyle, children: tabPanels.map(
          (tab, idx) => {
            var _a2, _b;
            return tab != null ? /* @__PURE__ */ jsx(
              CustomTabPanel,
              {
                index: idx,
                remountOnTabChange,
                selectedValue,
                value: ((_a2 = tabNames[idx]) == null ? void 0 : _a2.value) ?? "",
                children: tab
              },
              ((_b = tabNames[idx]) == null ? void 0 : _b.value) ?? idx
            ) : null;
          }
        ) })
      ]
    }
  );
}
Tabs.displayName = "Tabs";
export {
  CustomTabPanel,
  Tabs
};
