/** @license MIT | @cube-dev/ui-kit v0.142.7 | Cube Dev Team */
import { extractStyles } from "../../../utils/styles.js";
import { useTimer } from "../../../_internal/hooks/use-timer/use-timer.js";
import { CopyIcon } from "../../../icons/CopyIcon.js";
import { Button } from "../../actions/index.js";
import { useToast } from "../../overlays/Toast/useToast.js";
import { Card } from "../Card/Card.js";
import { POSITION_STYLES, tasty } from "@tenphi/tasty";
import { forwardRef, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { useClipboard } from "react-aria";
import copy from "clipboard-copy";

//#region src/components/content/CopyPasteBlock/CopyPasteBlock.tsx
const StyledBlock = tasty({ styles: {
	display: "grid",
	flow: "column",
	placeContent: "center space-between",
	placeItems: "center stretch",
	gap: "1x",
	position: "relative",
	width: "max 100%",
	color: "inherit",
	padding: "0 1.5x",
	userSelect: "none",
	Label: {
		whiteSpace: "nowrap",
		overflow: "hidden",
		textOverflow: "ellipsis"
	}
} });
const CopyPasteBlockElement = tasty(Card, {
	qa: "CopyPasteBlock",
	styles: {
		display: "grid",
		fill: "#surface-2",
		radius: "1r",
		padding: {
			"": "0 1px",
			":focus": "0"
		},
		color: {
			"": "#dark",
			error: "#danger-text"
		},
		border: {
			"": "dashed #dark-03",
			":focus": "2px dashed #primary-text",
			error: "dashed #danger"
		},
		cursor: "$pointer",
		preset: {
			"": "t3",
			"size=large": "t2"
		},
		height: {
			"": "5x",
			"size=small": "4x",
			"size=large": "6x"
		},
		boxSizing: "border-box",
		Grid: {
			display: "grid",
			flow: "row",
			gridColumns: "minmax(0, 1fr) min-content",
			placeContent: "stretch",
			width: "min 20x",
			radius: "1r",
			position: "relative"
		},
		Shortcut: { display: {
			"": "none",
			":focus & !error": "inline"
		} }
	}
});
const CopyButton = tasty(Button, {
	type: "clear",
	icon: /* @__PURE__ */ jsx(CopyIcon, {}),
	"aria-label": "Copy to clipboard",
	styles: {
		placeSelf: "stretch",
		border: "#clear",
		shadow: {
			"": "0 0 0 1ow #purple-03.0 inset",
			focused: "0 0 0 1ow #purple-03 inset"
		},
		radius: {
			"": "0 1r 1r 0",
			"multiline | has-scroll": "0 1r 0 0"
		},
		height: "auto",
		outline: false
	}
});
function CopyPasteBlock(allProps, ref) {
	const { value = "", onPaste, placeholder, title, size = "medium", ...props } = allProps;
	const styles = extractStyles(props, POSITION_STYLES);
	const [error, setError] = useState(null);
	const toast = useToast();
	const { clipboardProps } = useClipboard({
		async onPaste(items) {
			let pasted = await Promise.all(items.filter((item) => item.kind === "text" && item.types.has("text/plain")).map((item) => item.getText("text/plain")));
			try {
				await onPaste?.(pasted.join("\n"));
			} catch (e) {
				setError(String(e));
			}
		},
		getItems() {
			return value ? [{ "text/plain": value }] : [];
		},
		onCopy() {
			if (value) toast.success(`${title || "Text"} copied`);
		}
	});
	useTimer({
		delay: 1e3,
		callback() {
			setError(null);
		},
		isDisabled: !error
	});
	async function onCopy() {
		await copy(value);
		toast.success(`${title || "Text"} copied`);
	}
	const pristineValue = value.replace(/\n/, " ");
	return /* @__PURE__ */ jsx(CopyPasteBlockElement, {
		ref,
		mods: { error: !!error },
		"data-size": size,
		styles,
		tabIndex: "0",
		...props,
		...clipboardProps,
		children: /* @__PURE__ */ jsxs("div", {
			"data-element": "Grid",
			children: [/* @__PURE__ */ jsxs(StyledBlock, {
				"data-size": size,
				mods: { placeholder: !!placeholder || !value },
				children: [/* @__PURE__ */ jsx("div", {
					"data-element": "Label",
					children: error != null ? error || "Invalid data" : value ? pristineValue : /* @__PURE__ */ jsx(Fragment$1, { children: placeholder ? placeholder : "Select and paste" })
				}), /* @__PURE__ */ jsxs("span", {
					"data-element": "Shortcut",
					children: [
						/* @__PURE__ */ jsx("kbd", { children: "Cmd" }),
						" + ",
						/* @__PURE__ */ jsx("kbd", { children: "V" })
					]
				})]
			}), value && !error && /* @__PURE__ */ jsx(CopyButton, {
				size,
				"aria-label": `Copy ${title}`,
				onPress: onCopy
			})]
		})
	});
}
const _CopyPasteBlock = forwardRef(CopyPasteBlock);
_CopyPasteBlock.displayName = "CopyPasteBlock";

//#endregion
export { _CopyPasteBlock };
//# sourceMappingURL=CopyPasteBlock.js.map