import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { basicSetup } from 'codemirror';
import { useMemo, useRef, useState } from 'react';
import { json } from '@codemirror/lang-json';
import { Button, useToast } from '@vertesia/ui/core';
import { useUserSession } from '@vertesia/ui/session';
import { CodeMirrorEditor } from '@vertesia/ui/widgets';
const extensions = [basicSetup, json()];
export function TableLayoutEditor({ objectType, onLayoutUpdate }) {
    const toast = useToast();
    const [isUpdating, setUpdating] = useState(false);
    const { store } = useUserSession();
    const editorRef = useRef(undefined);
    const value = useMemo(() => {
        return stringifyTableLayout(objectType.table_layout);
    }, [objectType.table_layout]);
    const validationError = (title, message) => {
        toast({
            status: 'error',
            title: title,
            description: message,
            duration: 5000
        });
    };
    const onSave = () => {
        if (!editorRef.current) {
            return;
        }
        const value = editorRef.current.getValue();
        let table_layout;
        if (!value) {
            table_layout = null;
        }
        else {
            try {
                table_layout = JSON.parse(value);
            }
            catch (err) {
                return validationError('Invalid JSON', err.message);
            }
        }
        if (!Array.isArray(table_layout)) {
            return validationError('Invalid JSON', 'The table layout must be an array');
        }
        if (table_layout.some((col) => !col || !col.name || !col.field)) {
            return validationError('Invalid JSON', 'A table layout entry must contain the following properties:] {field, name, converter?}');
        }
        setUpdating(true);
        store.types.update(objectType.id, {
            table_layout
        }).then((response) => {
            toast({
                status: 'success',
                title: 'Table Layout updated',
                description: 'The table layout has been updated successfully',
                duration: 2000
            });
            onLayoutUpdate(response.table_layout);
        }).catch((err) => {
            toast({
                status: 'error',
                title: 'Failed to update table layout',
                description: err.message,
                duration: 5000
            });
        }).finally(() => {
            setUpdating(false);
        });
    };
    return (_jsxs("div", { className: "mx-2 my-2 rounded-2xl border border-solid shadow-xs", children: [_jsxs("div", { className: "flex items-center rounded-t-md border-b gap-x-2 py-2 pl-4 pr-2", children: [_jsx("div", { className: "text-base font-semibold ", children: "Table Layout Editor" }), _jsx("div", { className: "ml-auto flex gap-x-2", children: _jsx(Button, { isLoading: isUpdating, variant: "outline", size: "sm", onClick: onSave, children: "Save Changes" }) })] }), _jsx("div", { className: "px-4 py-2", children: _jsx(CodeMirrorEditor, { value: value, extensions: extensions, editorRef: editorRef }) })] }));
}
export function stringifyTableLayout(obj) {
    if (!obj) {
        return '[\n\n]';
    }
    return JSON.stringify(obj, null, 2);
}
//# sourceMappingURL=TableLayoutEditor.js.map