import { getLineHeightNumberForTypographyType } from "../styles/tokens/typography.js";
import { applyTypography } from "../styles/typography.js";
import { elide } from "../utils/strings.js";
import { Icon } from "./Icon/Icon.js";
import { useClipboard } from "../hooks/useClipboard.js";
import { lineClamp } from "../styles/utils.js";
import styled from "@emotion/styled";
import { useCallback } from "react";
import { useTheme } from "@emotion/react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
//#region src/components/ClipboardTextField.tsx
function ClipboardTextField({ value, icon, iconName, id, stopPropagation, maxLines, elide: elideArgs, wordBreakAll = false, tag = "span", iconSide = "left", iconColor: iconColorProp, typography, clipboardCallbacks }) {
	const theme = useTheme();
	const { canWriteToClipboard, writeTextToClipboard } = useClipboard(clipboardCallbacks);
	const addLineClamp = Boolean(maxLines && maxLines > 1);
	const valueNode = /* @__PURE__ */ jsx(ClipboardTextFieldValue, {
		wordBreakAll,
		typography,
		addLineClamp,
		maxLines,
		children: elideArgs ? elide(value, elideArgs) : value
	});
	const onClick = useCallback((event) => {
		if (stopPropagation) event.stopPropagation();
		writeTextToClipboard(value);
	}, [
		stopPropagation,
		value,
		writeTextToClipboard
	]);
	function onKeyDown(event) {
		if (event.key === "Enter" || event.key === " ") {
			if (stopPropagation) event.stopPropagation();
			writeTextToClipboard(value);
		}
	}
	const commonProps = {
		as: tag,
		id,
		addLineClamp,
		maxLines
	};
	const lineHeight = getLineHeightNumberForTypographyType(typography?.type || "Body", typography?.size || "ExtraSmall", theme);
	const iconColor = iconColorProp || typography?.color || "inherit";
	return canWriteToClipboard && value ? /* @__PURE__ */ jsxs(StyledClipboardTextField, {
		onClick,
		role: "button",
		tabIndex: 0,
		onKeyDown,
		...commonProps,
		children: [
			icon && iconSide === "left" ? /* @__PURE__ */ jsx(Icon, {
				name: iconName || "Copy",
				width: lineHeight * .7,
				mr: lineHeight * .3,
				color: iconColor
			}) : null,
			valueNode,
			icon && iconSide === "right" ? /* @__PURE__ */ jsx(Icon, {
				name: iconName || "Copy",
				width: lineHeight * .7,
				ml: lineHeight * .3,
				color: iconColor
			}) : null
		]
	}) : /* @__PURE__ */ jsx(StyledClipboardTextField, {
		...commonProps,
		children: valueNode
	});
}
const StyledClipboardTextField = styled.span`
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  align-items: center;
  box-sizing: content-box;
  cursor: pointer;

  ${({ addLineClamp, maxLines }) => addLineClamp || maxLines === 1 ? "display: inline-flex;" : ""}

  ${({ maxLines }) => maxLines === 1 ? "white-space: nowrap;" : ""}
`;
const ClipboardTextFieldValue = styled.span`
  flex: 1;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  word-break: ${({ wordBreakAll }) => wordBreakAll ? "break-all" : "normal"};
  vertical-align: middle;

  ${({ addLineClamp, maxLines }) => addLineClamp && maxLines ? `
        ${lineClamp(maxLines).styles}
        align-self: baseline;
      ` : ""}

  ${({ theme, typography }) => applyTypography(theme, typography?.type || "Body", typography?.size || "ExtraSmall", typography?.color || "inherit")}
`;
//#endregion
export { ClipboardTextField };
