import { jsx, jsxs } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import { useState } from 'react';
import { Trans, t } from '@grafana/i18n';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { ClipboardButton } from '../ClipboardButton/ClipboardButton.mjs';
import { Drawer } from '../Drawer/Drawer.mjs';
import { Stack } from '../Layout/Stack/Stack.mjs';
import { CodeEditor } from '../Monaco/CodeEditor.mjs';
import { Tab } from '../Tabs/Tab.mjs';
import { TabsBar } from '../Tabs/TabsBar.mjs';

"use strict";
var TableCellInspectorMode = /* @__PURE__ */ ((TableCellInspectorMode2) => {
  TableCellInspectorMode2["code"] = "code";
  TableCellInspectorMode2["text"] = "text";
  return TableCellInspectorMode2;
})(TableCellInspectorMode || {});
function TableCellInspector({ value, onDismiss, mode }) {
  const [currentMode, setMode] = useState(mode);
  const text = value.trim();
  const styles = useStyles2(getStyles);
  const tabs = [
    {
      label: "Plain text",
      value: "text"
    },
    {
      label: "Code editor",
      value: "code"
    }
  ];
  const changeTabs = () => {
    setMode(currentMode === "text" /* text */ ? "code" /* code */ : "text" /* text */);
  };
  const tabBar = /* @__PURE__ */ jsx(TabsBar, { children: tabs.map((t2, index) => /* @__PURE__ */ jsx(Tab, { label: t2.label, active: t2.value === currentMode, onChangeTab: changeTabs }, `${t2.value}-${index}`)) });
  return /* @__PURE__ */ jsx(Drawer, { onClose: onDismiss, title: t("grafana-ui.table.inspect-drawer-title", "Inspect value"), tabs: tabBar, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 2, children: [
    /* @__PURE__ */ jsx(ClipboardButton, { icon: "copy", getText: () => text, style: { marginLeft: "auto", width: "200px" }, children: /* @__PURE__ */ jsx(Trans, { i18nKey: "grafana-ui.table.copy", children: "Copy to Clipboard" }) }),
    currentMode === "code" ? /* @__PURE__ */ jsx(
      CodeEditor,
      {
        width: "100%",
        height: 500,
        language: "json",
        showLineNumbers: true,
        showMiniMap: (text ? text.length : 0) > 100,
        value: text,
        readOnly: true,
        wordWrap: true
      }
    ) : /* @__PURE__ */ jsx("pre", { className: styles.textContainer, children: text })
  ] }) });
}
const getStyles = (theme) => ({
  textContainer: css({
    color: theme.colors.text.secondary,
    minHeight: 42
  })
});

export { TableCellInspector, TableCellInspectorMode };
//# sourceMappingURL=TableCellInspector.mjs.map
