/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-d1bbdd3
 * Released under the MIT license.
 */

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { json } from '@codemirror/lang-json';
import CodeMirror from '@uiw/react-codemirror';
import { parse } from 'best-effort-json-parser';
import { useCallback, useRef, useState } from 'react';
import { Layout } from '../../components/content/Layout/index.js';
import { tasty } from '../../tasty/index.js';
const ErrorDisplay = tasty({
    styles: {
        padding: '1x 2x',
        fill: '#danger.10',
        color: '#danger-text',
        preset: 't4',
        borderTop: '#danger.20',
    },
});
export function PlaygroundEditor({ value, onChange }) {
    const [error, setError] = useState(null);
    const [editorValue, setEditorValue] = useState(() => JSON.stringify(value, null, 2));
    const isFocusedRef = useRef(false);
    const handleChange = useCallback((val) => {
        setEditorValue(val);
        try {
            // Use best-effort parser for lenient parsing (handles JS-like syntax)
            const parsed = parse(val);
            if (parsed && typeof parsed === 'object') {
                setError(null);
                onChange(parsed);
            }
        }
        catch (e) {
            setError(e.message);
        }
    }, [onChange]);
    const handleFocus = useCallback(() => {
        isFocusedRef.current = true;
    }, []);
    // Normalize JSON on blur - format it properly
    const handleBlur = useCallback(() => {
        isFocusedRef.current = false;
        try {
            const parsed = parse(editorValue);
            if (parsed && typeof parsed === 'object') {
                const normalized = JSON.stringify(parsed, null, 2);
                setEditorValue(normalized);
                setError(null);
            }
        }
        catch {
            // Keep current value if parsing fails
        }
    }, [editorValue]);
    // Normalize on paste
    const handlePaste = useCallback(() => {
        // Use setTimeout to let the paste complete first
        setTimeout(() => {
            try {
                const parsed = parse(editorValue);
                if (parsed && typeof parsed === 'object') {
                    const normalized = JSON.stringify(parsed, null, 2);
                    setEditorValue(normalized);
                    setError(null);
                }
            }
            catch {
                // Keep current value if parsing fails
            }
        }, 0);
    }, [editorValue]);
    // Sync external value changes only when not focused
    const currentJson = JSON.stringify(value, null, 2);
    if (currentJson !== editorValue && !error && !isFocusedRef.current) {
        setEditorValue(currentJson);
    }
    return (_jsxs(Layout, { height: "100%", children: [_jsx(Layout.Toolbar, { children: "Styles (JSON)" }), _jsx(Layout.Content, { padding: 0, children: _jsxs(Layout.Grid, { rows: "1sf max-content", flexGrow: 1, children: [_jsx(CodeMirror, { value: editorValue, height: "100%", extensions: [json()], theme: "light", basicSetup: {
                                lineNumbers: true,
                                foldGutter: true,
                                highlightActiveLine: true,
                            }, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onPaste: handlePaste }), error && _jsxs(ErrorDisplay, { children: ["JSON Error: ", error] })] }) })] }));
}

        