// IMPORTANT! This file MUST NOT be marked as "use client", otherwise it will
// cause Nextra to error when trying to render. This is because MDX files cannot
// import files marked with "use client", for some reason, but it's perfectly
// happy to import a server component (this file) that then imports a client
// component.
// TODO: We have to remove this before we can support Try It Now in Nextra
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { SandpackCodeEditor, SandpackConsole, SandpackLayout, SandpackPreview, SandpackProvider, useErrorMessage, } from "@codesandbox/sandpack-react";
import { useAtomValue } from "jotai";
import { CodeEditor } from "./CodeEditor/index.js";
import { dependenciesAtom, lastEditorValueAtom } from "./state/index.js";
import { styles } from "./styles.js";
const TryItNowContents = ({ _enableUnsafeAutoImport, }) => {
    const error = useErrorMessage();
    return (_jsxs(SandpackLayout, { children: [_enableUnsafeAutoImport ? _jsx(CodeEditor, {}) : _jsx(SandpackCodeEditor, {}), !error && (_jsx(SandpackConsole, { resetOnPreviewRestart: true, showSetupProgress: true, showRestartButton: true })), _jsx(SandpackPreview, { style: error ? undefined : styles.preview, children: error ? _jsx("pre", { children: error }) : null })] }));
};
export const TryItNow = ({ externalDependencies, defaultValue = "", _enableUnsafeAutoImport, }) => {
    const autoImportDependencies = useAtomValue(dependenciesAtom);
    const previousCodeAtomValue = useAtomValue(lastEditorValueAtom);
    return (_jsx("div", { style: { ...styles.container }, children: _jsx(SandpackProvider, { options: {
                autoReload: false,
                autorun: false,
                activeFile: "index.ts",
            }, template: "vanilla-ts", files: {
                "index.ts": {
                    code: _enableUnsafeAutoImport && previousCodeAtomValue
                        ? previousCodeAtomValue
                        : defaultValue,
                    active: true,
                },
            }, customSetup: {
                dependencies: autoImportDependencies && _enableUnsafeAutoImport
                    ? { ...autoImportDependencies, ...externalDependencies }
                    : externalDependencies,
                entry: "index.ts",
            }, theme: "dark", children: _jsx(TryItNowContents, {}) }) }));
};
//# sourceMappingURL=index.js.map