'use client';


import { CodeDefault } from "./CodeBlockClient.mjs";
import { useEffect, useState } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/IDE/CodeBlockShiki.tsx
const languageCache = /* @__PURE__ */ new Map();
const themeCache = /* @__PURE__ */ new Map();
const loadLanguage = async (lang) => {
	if (languageCache.has(lang)) return languageCache.get(lang);
	let languageModule;
	switch (lang) {
		case "typescript":
		case "ts":
			languageModule = await import("shiki/langs/typescript.mjs");
			break;
		case "javascript":
		case "js":
			languageModule = await import("shiki/langs/javascript.mjs");
			break;
		case "bash":
		case "sh":
		case "shell":
			languageModule = await import("shiki/langs/bash.mjs");
			break;
		case "json":
			languageModule = await import("shiki/langs/json.mjs");
			break;
		case "tsx":
			languageModule = await import("shiki/langs/tsx.mjs");
			break;
		case "vue":
			languageModule = await import("shiki/langs/vue.mjs");
			break;
		case "html":
			languageModule = await import("shiki/langs/html.mjs");
			break;
		default:
			languageModule = await import("shiki/langs/typescript.mjs");
			break;
	}
	const language = languageModule.default;
	languageCache.set(lang, language);
	return language;
};
const loadTheme = async (themeName) => {
	if (themeCache.has(themeName)) return themeCache.get(themeName);
	let themeModule;
	switch (themeName) {
		case "github-dark":
			themeModule = await import("shiki/themes/github-dark.mjs");
			break;
		case "github-light":
			themeModule = await import("shiki/themes/github-light.mjs");
			break;
		default:
			themeModule = await import("shiki/themes/github-light.mjs");
			break;
	}
	const theme = themeModule.default;
	themeCache.set(themeName, theme);
	return theme;
};
const highlightCode = async (code, lang, isDarkMode) => {
	const themeName = isDarkMode ? "github-dark" : "github-light";
	const [{ codeToHtml }, languageModule, themeModule] = await Promise.all([
		import("shiki/bundle/web"),
		loadLanguage(lang),
		loadTheme(themeName)
	]);
	return codeToHtml(code, {
		lang,
		theme: themeModule,
		langs: [languageModule]
	});
};
const CodeBlockShiki = ({ children, lang, isDarkMode }) => {
	const [html, setHtml] = useState(null);
	useEffect(() => {
		let isCancelled = false;
		setHtml(null);
		highlightCode(children, lang, isDarkMode).then((result) => {
			if (!isCancelled) setHtml(result);
		}).catch(() => {
			if (!isCancelled) setHtml("");
		});
		return () => {
			isCancelled = true;
		};
	}, [
		children,
		lang,
		isDarkMode
	]);
	return /* @__PURE__ */ jsx("div", {
		style: {
			backgroundColor: "transparent",
			minWidth: 0,
			maxWidth: "100%",
			overflow: "auto"
		},
		children: html ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ jsx(CodeDefault, { children })
	});
};

//#endregion
export { CodeBlockShiki };
//# sourceMappingURL=CodeBlockShiki.mjs.map