"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { SandpackCodeEditor, SandpackLayout, SandpackPreview, SandpackProvider, useErrorMessage, } from "@codesandbox/sandpack-react";
import { useAtomValue } from "jotai";
import { CodeEditor } from "../CodeEditor/index.js";
import { ConsoleOutput } from "../ConsoleOutput/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(ConsoleOutput, {}), _jsx(SandpackPreview, { style: error ? undefined : styles.preview, children: error ? _jsx("pre", { children: error }) : null })] }));
};
export const Content = ({ 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: "auto", children: _jsx(TryItNowContents, {}) }) }));
};
//# sourceMappingURL=index.js.map