'use client';


import { cn } from "../../utils/cn.mjs";
import { Loader } from "../Loader/index.mjs";
import { CopyButton } from "../CopyButton/index.mjs";
import { useMemo, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Editor } from "@monaco-editor/react";

//#region src/components/IDE/MonacoCode.tsx
const MonacoCode = ({ children, language, isDarkMode, showLineNumbers, showCopyButton = true, isReadOnly = false, onChange }) => {
	const containerRef = useRef(null);
	const ideRef = useRef(null);
	const [editorSize, setEditorSize] = useState({
		height: 0,
		width: 0
	});
	const theme = useMemo(() => isDarkMode ? "vs-dark-transparent" : "hc-light-theme", [isDarkMode]);
	const handleMountIde = (editor, monaco) => {
		ideRef.current = editor;
		const contentHeight = (editor.getContentHeight() ?? 0) + 25;
		monaco.editor.defineTheme("vs-dark-transparent", {
			base: "vs-dark",
			inherit: true,
			rules: [],
			colors: { "editor.background": "#00000000" }
		});
		monaco.editor.defineTheme("hc-light-theme", {
			base: "vs",
			inherit: true,
			rules: [],
			colors: { "editor.background": "#00000000" }
		});
		monaco.editor.setTheme(theme);
		monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
			noSemanticValidation: true,
			noSyntaxValidation: true
		});
		monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
			noSemanticValidation: true,
			noSyntaxValidation: true
		});
		monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
			noLib: true,
			allowNonTsExtensions: true
		});
		monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
			noLib: true,
			allowNonTsExtensions: true
		});
		setEditorSize({
			height: contentHeight,
			width: containerRef.current?.clientWidth ?? 0
		});
	};
	const isShowLineNumbers = showLineNumbers ?? children.split("\n").length > 1;
	return /* @__PURE__ */ jsxs("div", {
		className: cn("relative h-full w-full text-sm", showLineNumbers && "ml-0"),
		children: [showCopyButton && /* @__PURE__ */ jsx("div", {
			className: "sticky top-5 z-10",
			children: /* @__PURE__ */ jsx("div", {
				className: cn("absolute right-2 bottom-0 flex h-7 items-center"),
				children: /* @__PURE__ */ jsx(CopyButton, { content: children })
			})
		}), /* @__PURE__ */ jsx("div", {
			className: "z-0 grid size-full grid-cols-[0px] overflow-auto",
			ref: containerRef,
			children: /* @__PURE__ */ jsx(Editor, {
				...editorSize,
				defaultLanguage: "typescript",
				language,
				loading: /* @__PURE__ */ jsx(Loader, {}),
				defaultValue: String(children).replace(/\n$/, ""),
				onMount: handleMountIde,
				onChange,
				options: {
					readOnly: isReadOnly,
					cursorStyle: "line",
					minimap: { enabled: false },
					scrollbar: {
						vertical: "hidden",
						verticalScrollbarSize: 0,
						alwaysConsumeMouseWheel: false
					},
					folding: false,
					renderValidationDecorations: "off",
					quickSuggestions: false,
					parameterHints: { enabled: false },
					suggestOnTriggerCharacters: false,
					mouseWheelScrollSensitivity: 0,
					fastScrollSensitivity: 0,
					scrollBeyondLastLine: false,
					lineNumbers: isShowLineNumbers ? "on" : "off"
				},
				theme,
				className: "my-2 rounded-md"
			})
		})]
	});
};

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