/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b67433b | Cube Dev Team */
import { _Tooltip } from "../../overlays/Tooltip/Tooltip.js";
import { TooltipTrigger } from "../../overlays/Tooltip/TooltipTrigger.js";
import { CopyIcon } from "../../../icons/CopyIcon.js";
import { EyeIcon } from "../../../icons/EyeIcon.js";
import { EyeInvisibleIcon } from "../../../icons/EyeInvisibleIcon.js";
import { Action } from "../../actions/Action/Action.js";
import { Button } from "../../actions/index.js";
import { _PrismCode } from "../PrismCode/PrismCode.js";
import { useToast } from "../../overlays/Toast/useToast.js";
import { Card } from "../Card/Card.js";
import { tasty } from "@tenphi/tasty";
import { useMemo, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import copy from "clipboard-copy";

//#region src/components/content/CopySnippet/CopySnippet.tsx
const ActionElement = tasty(Action, { styles: {
	display: "block",
	cursor: "default",
	width: "100%"
} });
const StyledBlock = tasty({ styles: {
	position: "relative",
	overflow: {
		"": "auto clip",
		multiline: "auto"
	},
	width: "initial auto 100%",
	height: {
		"": "max 5x",
		multiline: "auto"
	},
	boxSizing: "border-box",
	whiteSpace: {
		"": "initial",
		nowrap: "nowrap"
	},
	scrollbar: "styled",
	padding: "1.125x 1.5x",
	fade: {
		"": "right 2x",
		multiline: false
	},
	Code: {
		$: "code",
		font: {
			"": "monospace",
			serif: true
		}
	}
} });
const ButtonContainer = tasty({ styles: {
	position: "relative",
	display: "flex",
	flow: {
		"": "row-reverse",
		multiline: "column"
	},
	placeContent: "start",
	"$button-size": {
		"": "5x",
		multiline: "4x"
	},
	"$first-button-radius": {
		"": "0 1r 1r 0",
		multiline: "0 1r 0 0"
	},
	"$last-button-radius": {
		"": "0",
		multiline: "0 0 0 1r"
	},
	"$first-and-last-button-radius": {
		"": "0 1r 1r 0",
		multiline: "0 1r 0 1r"
	},
	border: "left #clear"
} });
const CopySnippetElement = tasty(Card, {
	qa: "CopySnippet",
	styles: {
		display: "grid",
		gridRows: "minmax(0, 1fr)",
		fill: "#surface-2",
		border: 0,
		padding: 0,
		preset: "default",
		radius: "1r",
		overflow: "hidden",
		height: "max-content",
		Grid: {
			display: "grid",
			flow: "row",
			gridColumns: "minmax(0, 1fr) auto",
			gridRows: "minmax(0, 1fr)",
			width: "min 20x",
			position: "relative"
		}
	}
});
const ActionButton = tasty(Button, {
	type: "clear",
	styles: {
		width: "4x",
		padding: 0,
		placeSelf: "stretch",
		border: "#clear",
		shadow: {
			"": "inset 0 0 0 1ow #purple-03.0",
			focused: "inset 0 0 0 1ow #purple-03"
		},
		outline: false,
		height: "$button-size",
		radius: {
			"": 0,
			":last-child": "$last-button-radius",
			":first-child": "$first-button-radius",
			":first-child & :last-child": "$first-and-last-button-radius"
		}
	}
});
const CopyButton = tasty(ActionButton, {
	icon: /* @__PURE__ */ jsx(CopyIcon, {}),
	"aria-label": "Copy to clipboard"
});
const ShowButton = tasty(ActionButton, { "aria-label": "Show hidden parts" });
const HIDDEN_SYMBOL = "•";
function replaceSymbolsToHidden(str) {
	return HIDDEN_SYMBOL.repeat(str.length);
}
function CopySnippet(allProps) {
	const { code = "", title = "Code example", nowrap, prefix = "", language, serif, actions, showTooltip = false, hideText, ...props } = allProps;
	const toast = useToast();
	const [showHidden, setShowHidden] = useState(false);
	async function onCopy() {
		await copy(code);
		toast.success(`${title} copied`);
	}
	const pristineCode = code.replace(/\n$/, "");
	const multiline = pristineCode.includes("\n") && !nowrap;
	let formattedCode = pristineCode.replace(/\r/g, "").split(/\n/g).map((line) => `${prefix}${line}`).join("\n").trim();
	if (!showHidden) {
		if (hideText === true) formattedCode = replaceSymbolsToHidden(formattedCode);
		else if (typeof hideText === "string") formattedCode = formattedCode.replaceAll(hideText, replaceSymbolsToHidden(hideText));
		else if (Array.isArray(hideText)) hideText.forEach((text) => {
			formattedCode = formattedCode.replaceAll(text, replaceSymbolsToHidden(text));
		});
	}
	const mods = useMemo(() => {
		return {
			nowrap,
			multiline,
			serif,
			hidden: !!hideText
		};
	}, [
		nowrap,
		multiline,
		hideText,
		serif
	]);
	const Snippet = /* @__PURE__ */ jsx(CopySnippetElement, {
		mods,
		...props,
		children: /* @__PURE__ */ jsxs("div", {
			"data-element": "Grid",
			children: [/* @__PURE__ */ jsx(StyledBlock, {
				mods,
				children: /* @__PURE__ */ jsx(_PrismCode, {
					style: {
						margin: 0,
						overflow: "visible"
					},
					code: formattedCode,
					language: language || "javascript"
				})
			}), /* @__PURE__ */ jsxs(ButtonContainer, {
				mods,
				children: [
					/* @__PURE__ */ jsx(CopyButton, {
						"aria-label": `Copy ${title}`,
						onPress: onCopy
					}),
					hideText && /* @__PURE__ */ jsx(ShowButton, {
						icon: showHidden ? /* @__PURE__ */ jsx(EyeInvisibleIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {}),
						onPress: () => setShowHidden(!showHidden)
					}),
					actions
				]
			})]
		})
	});
	if (showTooltip) return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [/* @__PURE__ */ jsx(ActionElement, { children: Snippet }), /* @__PURE__ */ jsx(_Tooltip, { children: formattedCode })] });
	return Snippet;
}
const _CopySnippet = Object.assign(CopySnippet, { Button: ActionButton });
_CopySnippet.displayName = "CopySnippet";

//#endregion
export { _CopySnippet };
//# sourceMappingURL=CopySnippet.js.map