import useXComponentConfig from "../_utils/hooks/use-x-component-config.js";
import { codeToHtml } from "./shiki.js";
import style_default from "./style/index.js";
import { computed, createVNode, defineComponent, mergeProps, ref, shallowRef, useAttrs, watch } from "vue";
import { Button, Tooltip } from "antdv-next";
import { CheckOutlined, CopyOutlined, MoonOutlined, SunOutlined } from "@antdv-next/icons";
//#region components/code-highlighter/CodeHighlighter.tsx
var XCodeHighlighter = /* @__PURE__ */ defineComponent({
	name: "AxCodeHighlighter",
	inheritAttrs: false,
	props: {
		prefixCls: {
			type: String,
			default: "antd-code-highlighter"
		},
		content: {
			type: String,
			required: true
		},
		language: {
			type: String,
			default: "text"
		},
		showLineNumbers: {
			type: Boolean,
			default: true
		},
		showLanguage: {
			type: Boolean,
			default: true
		},
		showThemeToggle: {
			type: Boolean,
			default: false
		},
		showCopyButton: {
			type: Boolean,
			default: true
		},
		theme: {
			type: String,
			default: "light"
		},
		startLineNumber: {
			type: Number,
			default: 1
		},
		styles: {
			type: Object,
			default: () => ({})
		},
		classes: {
			type: Object,
			default: () => ({})
		},
		onCopy: {
			type: Function,
			default: void 0
		},
		rootClass: {
			type: String,
			default: ""
		},
		class: {
			type: [
				String,
				Array,
				Object
			],
			default: void 0
		},
		style: {
			type: [
				String,
				Object,
				Array
			],
			default: void 0
		}
	},
	emits: ["update:theme"],
	setup(props, { emit, expose }) {
		const attrs = useAttrs();
		const contextConfig = useXComponentConfig("codeHighlighter");
		const rootRef = ref();
		const [hashId, cssVarCls] = style_default(computed(() => props.prefixCls));
		const copied = ref(false);
		const highlightedHtml = shallowRef("");
		const highlightCode = async () => {
			try {
				highlightedHtml.value = await codeToHtml(props.content, {
					lang: props.language,
					theme: props.theme === "dark" ? "vitesse-dark" : "vitesse-light"
				});
			} catch (e) {
				console.error("Failed to highlight code:", e);
				highlightedHtml.value = `<pre><code>${escapeHtml(props.content)}</code></pre>`;
			}
		};
		watch(() => [
			props.content,
			props.language,
			props.theme
		], () => {
			highlightCode();
		}, { immediate: true });
		function escapeHtml(str) {
			return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
		}
		expose({ get nativeElement() {
			return rootRef.value;
		} });
		const domAttrs = computed(() => {
			const { class: _class, style: _style, ...rest } = attrs;
			return rest;
		});
		const lines = computed(() => {
			return props.content.split("\n");
		});
		const handleCopy = async () => {
			try {
				await navigator.clipboard.writeText(props.content);
				copied.value = true;
				props.onCopy?.(props.content);
				setTimeout(() => {
					copied.value = false;
				}, 2e3);
			} catch (e) {
				console.error("Failed to copy:", e);
			}
		};
		const toggleTheme = () => {
			emit("update:theme", props.theme === "light" ? "dark" : "light");
		};
		const getSlotClassName = (slot) => {
			return [
				`${props.prefixCls}-${slot}`,
				contextConfig.value.classes?.[slot],
				props.classes?.[slot]
			];
		};
		const renderHeader = () => {
			if (!(props.showLanguage || props.showThemeToggle || props.showCopyButton)) return null;
			return createVNode("div", {
				"class": getSlotClassName("header"),
				"style": [contextConfig.value.styles?.header, props.styles?.header]
			}, [props.showLanguage && createVNode("span", {
				"class": [
					`${props.prefixCls}-lang`,
					contextConfig.value.classes?.headerTitle,
					props.classes?.headerTitle
				],
				"style": [contextConfig.value.styles?.headerTitle, props.styles?.headerTitle]
			}, [props.language || "text"]), createVNode("div", { "class": `${props.prefixCls}-actions` }, [props.showThemeToggle && createVNode(Tooltip, { "title": props.theme === "light" ? "切换暗色主题" : "切换亮色主题" }, { default: () => [createVNode(Button, {
				"type": "text",
				"size": "small",
				"class": `${props.prefixCls}-theme-btn`,
				"onClick": toggleTheme
			}, { default: () => [props.theme === "light" ? createVNode(MoonOutlined, null, null) : createVNode(SunOutlined, null, null)] })] }), props.showCopyButton && createVNode(Tooltip, { "title": copied.value ? "已复制" : "复制代码" }, { default: () => [createVNode(Button, {
				"type": "text",
				"size": "small",
				"class": `${props.prefixCls}-copy-btn`,
				"onClick": handleCopy
			}, { default: () => [copied.value ? createVNode(CheckOutlined, null, null) : createVNode(CopyOutlined, null, null)] })] })])]);
		};
		const renderLineNumbers = () => {
			if (!props.showLineNumbers) return null;
			return createVNode("div", { "class": `${props.prefixCls}-line-numbers` }, [lines.value.map((_, idx) => createVNode("div", {
				"key": idx,
				"class": `${props.prefixCls}-line-number`
			}, [props.startLineNumber + idx]))]);
		};
		const renderContent = () => {
			return createVNode("div", {
				"class": getSlotClassName("content"),
				"style": [contextConfig.value.styles?.content, props.styles?.content]
			}, [renderLineNumbers(), createVNode("div", {
				"class": [
					`${props.prefixCls}-code`,
					contextConfig.value.classes?.code,
					props.classes?.code
				],
				"style": [contextConfig.value.styles?.code, props.styles?.code],
				"innerHTML": highlightedHtml.value
			}, null)]);
		};
		return () => createVNode("div", mergeProps({ "ref": rootRef }, domAttrs.value, {
			"class": [
				props.prefixCls,
				`${props.prefixCls}-${props.theme}`,
				props.rootClass,
				contextConfig.value.classes?.root,
				props.classes?.root,
				hashId.value,
				cssVarCls.value,
				attrs.class,
				props.class
			],
			"style": [
				contextConfig.value.style,
				contextConfig.value.styles?.root,
				props.styles?.root,
				attrs.style,
				props.style
			]
		}), [renderHeader(), renderContent()]);
	}
});
//#endregion
export { XCodeHighlighter, XCodeHighlighter as default };
