import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { ChevronDown, ChevronRight, Plus } from 'lucide-react';
import { Button, useToast } from '@vertesia/ui/core';
import { TypeNames } from '../type-signature.js';
import { Editable } from './Editable.js';
import { getEditableSchemaProperty } from './EditableSchemaProperty.js';
import { PropertyEditor } from './PropertyEditor.js';
import { PropertyViewer } from './PropertyViewer.js';
// do not exit edit mode when user is clicking inside the type suggestion popup
function skipClickOutside(e) {
    const target = e.target;
    return !!(target.closest && target.closest('.schema-type-suggest-popup'));
}
;
export function SchemaEditor({ schema, readonly = false }) {
    return (_jsxs("ul", { className: "", children: [schema.children.map(prop => {
                return renderProperty(prop, readonly);
            }), !readonly ? _jsx(AddPropertyButton, { parent: schema.root }) : null] }));
}
function renderProperty(node, readonly) {
    return (node.isParent ?
        _jsx(ParentItem, { property: node, readonly: readonly }, node.name)
        :
            _jsx(SimpleItem, { node: node, readonly: readonly }, node.name));
}
function SimpleItem({ node, readonly }) {
    return (_jsx("li", { children: _jsx(PropertyTitleBar, { property: node, readonly: readonly }) }));
}
function ParentItem({ property, readonly }) {
    const [isOpen, setOpen] = useState(true);
    const Icon = isOpen ? ChevronDown : ChevronRight;
    return (_jsxs("li", { children: [_jsxs("div", { className: 'flex items-center w-full', children: [_jsx("button", { onClick: () => setOpen(!isOpen), children: _jsx(Icon, { className: "size-4" }) }), _jsx("div", { className: 'flex-1', children: _jsx(PropertyTitleBar, { property: property, readonly: readonly }) })] }), isOpen &&
                _jsxs("ul", { className: "ml-4 border-l border-gray-400 border-dashed", children: [(property.children || []).map(prop => renderProperty(prop, readonly)), !readonly ? _jsx(AddPropertyButton, { parent: property }) : null] })] }));
}
export function validatePropertyName(propertyName) {
    if (!propertyName) {
        return 'Name is required';
    }
    if (/^[a-zA-Z0-9_]+[?]?$/.test(propertyName)) {
        return undefined; // valid
    }
    return 'Only letters, numbers, underscores or question mark are allowed (a-zA-Z0-9_?)';
}
function PropertyTitleBar({ property, readonly }) {
    const toast = useToast();
    const onChange = (value) => {
        try {
            if (value.description && typeof value.description !== 'string') {
                value.description = undefined;
            }
            const update = property.getUpdateFromNameAndTypeSignature(value.name, value.type);
            if (property.update({ ...update, description: value.description })) {
                property.reloadTree();
            }
        }
        catch (err) {
            toast({
                status: 'error',
                title: 'Invalid property declaration',
                description: err.message,
                duration: 9000
            });
            return false;
        }
        return true;
    };
    const isNew = property.resetIsNew();
    const editableProp = getEditableSchemaProperty(property);
    return (_jsx(Editable, { value: editableProp, onChange: onChange, onDelete: () => {
            property.remove();
            property.reloadTree();
        }, editor: PropertyEditor, viewer: PropertyViewer, outlineOnHover: true, isEditing: isNew, skipClickOutside: skipClickOutside, readonly: readonly, onValidate: (property) => validatePropertyName(property.name) }));
}
function AddPropertyButton({ parent }) {
    const add = () => {
        const name = parent.findAvailableChildName("new_property_");
        const child = parent.addChild(name, { isObject: false, isArray: false, isNullable: false, name: TypeNames.string }, true);
        child.isNew = true;
        parent.reloadTree();
    };
    return (_jsxs(Button, { variant: "ghost", onClick: add, children: [_jsx(Plus, { className: 'size-4' }), "Add property"] }));
}
//# sourceMappingURL=SchemaEditor.js.map