Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../../chunk-BN4qSVkS.cjs");
const require_styles_breakpoints = require("../../styles/breakpoints.cjs");
const require_styles_themes = require("../../styles/themes.cjs");
const require_router = require("../../router.cjs");
const require_styles_common = require("../../styles/common.cjs");
const require_components_Icon_Icon = require("../Icon/Icon.cjs");
const require_hooks_useClipboard = require("../../hooks/useClipboard.cjs");
const require_styles_utils = require("../../styles/utils.cjs");
const require_components_ClipboardTextField = require("../ClipboardTextField.cjs");
const require_components_Loading = require("../Loading.cjs");
const require_components_Dropdown = require("../Dropdown.cjs");
const require_components_InfoIconTooltip = require("../InfoIconTooltip.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let lodash_es = require("lodash-es");
let react = require("react");
let _emotion_react = require("@emotion/react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
let _tanstack_react_table = require("@tanstack/react-table");
//#region src/components/Table/Table.tsx
const isObjectCell = (value) => {
	return (0, lodash_es.isObject)(value) && "text" in value && typeof value.text === "string";
};
const isLinkCell = (value) => {
	return isObjectCell(value) && ("link" in value || "to" in value);
};
const isClipboardCell = (value) => {
	return isObjectCell(value) && "canCopy" in value;
};
const isLinkAndClipboardCell = (value) => {
	return isObjectCell(value) && ("link" in value || "to" in value) && "canCopy" in value;
};
const isMultilineCell = (value) => {
	return isObjectCell(value) && "multiline" in value;
};
function Table({ columns, data, loading, onClickRow, emptyState, clipboardCallbacks, customComponents, tripleDotsMenuItems, rowHoverEffect = "border", minHeight = 300, loadingStyle = { style: "spinner" }, fullHeight = false }) {
	const navigate = require_router.useNavigate();
	const [sorting, setSorting] = (0, react.useState)([]);
	const { canWriteToClipboard, writeTextToClipboard } = require_hooks_useClipboard.useClipboard(clipboardCallbacks);
	const onClickCopy = (0, react.useCallback)((value) => (event) => {
		event.stopPropagation();
		writeTextToClipboard(value);
	}, [writeTextToClipboard]);
	const mappedColumns = (0, react.useMemo)(() => columns.map((column) => ({
		...column,
		header: (context) => typeof column.header === "string" ? column.header : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", { children: [column.header.name, /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_InfoIconTooltip.InfoIconTooltip, {
			id: `tooltip-${column.header.name}`,
			content: column.header.tooltip || "",
			verticalAlign: -2
		})] }),
		accessorKey: column.accessorKey.toString(),
		cell: (context) => {
			if (column.function && typeof column.function === "function") return column.function(context);
			const value = context.getValue();
			let content = null;
			let icon = null;
			if (isObjectCell(value)) {
				const base64icon = value.base64icon ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Base64Icon, {
					src: value.base64icon,
					alt: "Icon"
				}) : null;
				icon = value.icon ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
					name: value.icon,
					width: 14,
					mr: 4,
					color: "c4Neutral"
				}) : null;
				if (isMultilineCell(value)) content = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(LineClampSpan, { children: [base64icon ? base64icon : icon, value.text] });
				else content = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react.Fragment, { children: [base64icon ? base64icon : icon, value.text] });
			} else content = value;
			if (isLinkAndClipboardCell(value)) {
				const copyButton = canWriteToClipboard && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CopyButton, {
					onClick: onClickCopy(value.text),
					role: "button",
					tabIndex: 0,
					children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
						name: "Copy",
						width: 16,
						mr: 12
					})
				});
				return value.link ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(LinkClipboardCell, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(HoverableLinkCell, {
					href: value.link,
					target: "_blank",
					rel: "noreferrer",
					onClick: (e) => {
						e.stopPropagation();
					},
					children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
						name: "LinkIcon",
						width: 12
					}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(LinkCellContent, { children: content })]
				}), copyButton] }) : value.to ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(HoverableCellWrapper, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(require_router.Link, {
					to: value.to,
					params: value.toParams,
					onClick: (e) => {
						e.stopPropagation();
					},
					children: [icon, /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(LinkCellContent, { children: value.text })]
				}), copyButton] }) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", { children: content });
			} else if (isLinkCell(value)) return value.link ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(HoverableLinkCell, {
				href: value.link,
				target: "_blank",
				rel: "noreferrer",
				onClick: (e) => {
					e.stopPropagation();
				},
				children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
					name: "LinkIcon",
					width: 12
				}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(LinkCellContent, { children: content })]
			}) : value.to ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(HoverableCellWrapper, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(require_router.Link, {
				to: value.to,
				params: value.toParams,
				onClick: (e) => {
					e.stopPropagation();
				},
				children: [icon, /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(LinkCellContent, { children: value.text })]
			}) }) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", { children: content });
			else if (isClipboardCell(value)) {
				let maxLines = 1;
				let maxChars = void 0;
				if (isMultilineCell(value)) maxLines = 2;
				else maxChars = value.maxChars || 16;
				const ellipsisPosition = value.ellipsisPosition || "middle";
				return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(HoverableCellWrapper, { children: [icon, /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_ClipboardTextField.ClipboardTextField, {
					value: value.text,
					elide: maxChars ? {
						maxChars,
						ellipsisPosition
					} : void 0,
					stopPropagation: true,
					maxLines,
					icon: true,
					iconSide: "right",
					clipboardCallbacks,
					typography: customComponents?.clipboardTextField?.typography ? customComponents.clipboardTextField.typography : void 0,
					iconName: customComponents?.clipboardTextField?.iconName
				})] });
			}
			return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", { children: content });
		}
	})), [
		columns,
		canWriteToClipboard,
		onClickCopy,
		clipboardCallbacks,
		customComponents
	]);
	if (tripleDotsMenuItems) {
		const DropdownComponent = customComponents?.dropdownComponent || require_components_Dropdown.Dropdown;
		mappedColumns.push({
			header: (context) => "",
			accessorKey: "tripleDots",
			cell: (context) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(DropdownComponent, {
				button: {
					icon: { name: "CentralDotGrid1x3Vertical" },
					kind: "ghost"
				},
				align: "right",
				dropdownItems: tripleDotsMenuItems?.map((item) => ({
					label: item.text,
					onClick: () => item.onClick(context.row.original)
				})) || []
			})
		});
	}
	const tableInstance = (0, _tanstack_react_table.useReactTable)({
		columns: mappedColumns,
		data,
		state: { sorting },
		onSortingChange: setSorting,
		getCoreRowModel: (0, _tanstack_react_table.getCoreRowModel)(),
		getSortedRowModel: (0, _tanstack_react_table.getSortedRowModel)()
	});
	function onClickDataRow(event, row) {
		const onClickRowResult = onClickRow ? onClickRow(row) : null;
		if (onClickRowResult) {
			const newTabKey = event.metaKey || event.ctrlKey;
			if (onClickRowResult?.link || onClickRowResult?.to && newTabKey) {
				let link = onClickRowResult?.link;
				if (!link) link = require_router.replaceParams(onClickRowResult.to, onClickRowResult.params);
				const target = newTabKey ? "_blank" : void 0;
				window.open(link, target);
			} else if (onClickRowResult?.to) navigate(onClickRowResult.to, onClickRowResult.params);
		}
	}
	const thead = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("thead", { children: tableInstance.getHeaderGroups().map((headerGroup) => {
		return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("th", { children: header.isPlaceholder ? null : (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id);
	}) });
	const tbody = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("tbody", { children: (!loading || ["none", "spinner"].includes(loadingStyle.style)) && tableInstance.getRowModel().rows.map((row) => {
		return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("tr", {
			onClick: (event) => onClickDataRow(event, row),
			onKeyDown: (event) => {
				if (event.key === "Enter") onClickDataRow(event, row);
			},
			tabIndex: 0,
			children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("td", { children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
		}, row.id);
	}) });
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(TableWrapper, {
		minHeight,
		fullHeight,
		children: [
			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(customComponents?.table || StyledTable, {
				clickable: Boolean(onClickRow),
				rowHoverEffect,
				children: [thead, tbody]
			}),
			!loading && emptyState,
			loading && loadingStyle.style === "spinner" && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Loading.Loading, {}),
			loading && loadingStyle.style === "progress-bar" && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ProgressBar, { timeMs: loadingStyle.timeMs })
		]
	});
}
function ProgressBar({ timeMs }) {
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ProgressBarContainer, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ProgressBarInner, { timeMs }) });
}
const ProgressBarContainer = _emotion_styled.default.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 3px;
  background: ${({ theme }) => theme.bg};
`;
const ProgressBarInner = _emotion_styled.default.div`
  height: 100%;
  background: ${({ theme }) => theme.text};

  @keyframes progressBar {
    0% {
      width: 0%;
    }
    50% {
      width: 90%;
    }
    100% {
      width: 95%;
    }
  }

  animation: progressBar ${({ timeMs }) => timeMs}ms ease-out forwards;
`;
const TableWrapper = _emotion_styled.default.div`
  position: relative;
  min-height: ${({ minHeight }) => minHeight}px;
  ${require_styles_utils.overflowAutoWithoutScrollbars}
  ${({ fullHeight }) => fullHeight && _emotion_react.css`
      height: 100%;
    `}
`;
const hoverCellStyles = _emotion_react.css`
  cursor: pointer;
  transition: opacity 0.25s;

  &:hover {
    opacity: 0.6;
  }
`;
const LinkCellContent = _emotion_styled.default.span`
  vertical-align: middle;
`;
const HoverableCellWrapper = _emotion_styled.default.div`
  ${hoverCellStyles}

  ${require_router.Link} {
    text-overflow: ellipsis;
    overflow: hidden;
  }
  display: flex !important;
  gap: 4px;
`;
const LinkClipboardCell = _emotion_styled.default.a`
  ${hoverCellStyles}

  color: ${({ theme }) => theme.hcNeutral};
  display: flex !important;
  gap: 4px;
`;
const HoverableLinkCell = _emotion_styled.default.a`
  ${hoverCellStyles}

  color: ${({ theme }) => theme.hcNeutral};
  display: flex !important;
  gap: 4px;
`;
const CopyButton = _emotion_styled.default.span`
  overflow: hidden;
  align-items: center;
  cursor: pointer;
  display: inline-table;
`;
const LineClampSpan = _emotion_styled.default.span`
  ${require_styles_utils.lineClamp(2)}
`;
const Base64Icon = _emotion_styled.default.img`
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
  margin-right: 12px;
`;
const cellPaddingPx = 15;
const StyledTable = _emotion_styled.default.table`
  position: relative;
  border-spacing: 0;
  width: 100%;

  /* Important to use padding here instead of width so that table container overflow functions properly: */
  ${require_styles_breakpoints.bp.lg(`
    padding-left: ${require_styles_common.standardContentInset.lgPx}px;
    padding-right: ${require_styles_common.standardContentInset.lgPx}px;
  `)}
  ${require_styles_breakpoints.bp.sm(`
    padding-left: ${require_styles_common.standardContentInset.smPx}px;
    padding-right: ${require_styles_common.standardContentInset.smPx}px;
  `)}
  ${require_styles_breakpoints.bp.minSmMaxLg(`
    padding-left: ${require_styles_common.standardContentInset.minSmMaxLgPx}px;
    padding-right: ${require_styles_common.standardContentInset.minSmMaxLgPx}px;
  `)}

  th {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    padding: ${cellPaddingPx}px 0px;
    border-bottom: 1px solid
      ${({ theme }) => require_styles_themes.themeOrWithKey("c1Neutral", "c2Neutral")({ theme })};
    padding: ${cellPaddingPx}px;
    &:first-of-type {
      padding-left: 0px;
    }
    &:last-of-type {
      padding-right: 0px;
    }
    &:last-of-type {
      text-align: right;
    }
  }

  td {
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0 ${cellPaddingPx}px;
    white-space: nowrap;
    & > span {
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      padding: ${cellPaddingPx}px 0px;
      & > * {
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
      }
    }
    &:first-of-type {
      padding-left: 0px;
    }
    &:last-of-type {
      text-align: right;
      padding-right: 0px;
    }
    & span:has(> ${LineClampSpan}),
    & ${LineClampSpan} {
      white-space: normal;
    }
  }

  tr {
    cursor: ${({ clickable }) => clickable ? "pointer" : "default"};
    position: relative;

    ${({ rowHoverEffect, theme }) => `
        &:hover {
          td {
            position: relative;
            &:before {
              content: "";
              display: block;
              position: absolute;
              pointer-events: none;
              height: 80%;
              top: 10%;
              bottom: 10%;
              ${rowHoverEffect === "background" ? `background: ${theme.c1Neutral};` : `
                    border: 1px solid ${require_styles_themes.themeOrWithKey("c1Neutral", "c2Neutral")({ theme })};
                    border-left-width: 0;
                    border-right-width: 0;
                  `}
              left: 0;
              right: 0;
              width: 100%;
            }
            &:first-of-type {
              overflow: visible;
              &:before {
                border-top-left-radius: 32px;
                border-bottom-left-radius: 32px;
                transform: translateX(-12px);
                width: calc(100% + 12px);
                ${rowHoverEffect === "border" ? "border-left-width: 1px;" : ""}
              }
            }
            &:last-of-type {
              overflow: visible;
              &:before {
                border-top-right-radius: 32px;
                border-bottom-right-radius: 32px;
                transform: translateX(12px);
                width: calc(100% + 12px);
                left: auto;
                ${rowHoverEffect === "border" ? "border-right-width: 1px;" : ""}
              }
            }
          }
        }
        `}
  }
`;
//#endregion
exports.Table = Table;
