import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import { AlignLeft } from 'lucide-react';
import { Button, VModal, ModalBody, ModalFooter, VModalTitle, Styles, VSelectBox } from '@vertesia/ui/core';
import { TypeNames } from '../type-signature.js';
function makeTypeOptions() {
    const types = Object.values(TypeNames);
    const options = [...types];
    for (const type of types) {
        options.push(type + '[]');
    }
    types.sort();
    return options;
}
const TYPE_OPTIONS = makeTypeOptions();
export function PropertyEditor({ value, onChange, onCancel, onSave }) {
    const [isModalOpen, setModalOpen] = useState(false);
    if (!value)
        return null;
    const onNameChange = (text) => {
        onChange({ ...value, name: text });
    };
    const onTypeChange = (text) => {
        onChange({ ...value, type: text });
    };
    const onDescriptionChange = (text) => {
        if (text !== undefined && typeof text === 'string') {
            onChange({ ...value, description: text }, true);
        }
        setModalOpen(false);
    };
    return (_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "flex-1", children: _jsx(PropertyNameEditor, { value: value.name, onChange: onNameChange, onCancel: onCancel, onSave: onSave }) }), _jsx("div", { className: "px-1 font-semibold", children: ":" }), _jsx("div", { className: "flex-1", children: _jsx(PropertyTypeEditor, { value: value.type, onChange: onTypeChange, onCancel: onCancel, onSave: onSave }) }), _jsxs("div", { children: [_jsx(Button, { variant: "ghost", size: "xs", onClick: () => setModalOpen(true), title: "Edit description", children: _jsx(AlignLeft, { className: "size-4" }) }), _jsx(EditDescriptionModal, { value: value.description, isOpen: isModalOpen, onClose: onDescriptionChange })] })] }));
}
export function PropertyNameEditor({ value, onChange, onCancel, onSave }) {
    const ref = useRef(null);
    useEffect(() => {
        ref.current?.focus();
    }, []);
    const onKeyUp = (e) => {
        switch (e.key) {
            case "Enter":
                onSave?.();
                break;
            case "Escape":
                onCancel?.();
                break;
        }
    };
    const _onChange = (e) => {
        onChange(e.target.value);
    };
    return (_jsx("input", { onKeyUp: onKeyUp, ref: ref, value: value, onChange: _onChange, className: Styles.INPUT_UNSTYLED, style: { fontSize: "inherit", width: "", display: "inline" } }));
}
function PropertyTypeEditor({ value, onChange, onCancel, onSave }) {
    const onBlur = () => {
        onSave?.();
    };
    const onKeyDown = (e, isOpen) => {
        if (!isOpen) {
            if (e.key === 'Enter') {
                onSave?.();
            }
            else if (e.key === 'Escape') {
                onCancel?.();
            }
        }
    };
    return (_jsx(VSelectBox, { className: Styles.INPUT_UNSTYLED, options: TYPE_OPTIONS, value: value || '', onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown, popupClass: "schema-type-suggest-popup z-90" }));
}
function EditDescriptionModal({ value, isOpen, onClose }) {
    return (_jsxs(VModal, { isOpen: isOpen, onClose: onClose, children: [_jsx(VModalTitle, { children: "Edit description" }), _jsx(EditDescriptionModalForm, { value: value, onSave: onClose })] }));
}
function EditDescriptionModalForm({ value, onSave }) {
    const ref = useRef(null);
    const [currentValue, setCurrentValue] = useState(value || '');
    useEffect(() => {
        ref.current && ref.current.focus();
    }, [ref.current]);
    return (_jsxs(_Fragment, { children: [_jsx(ModalBody, { className: "h-max", children: _jsx("textarea", { ref: ref, className: "dark:bg-gray-800 w-full h-full dark:text-white", value: currentValue, onChange: (e) => setCurrentValue(e.target.value) }) }), _jsx(ModalFooter, { children: _jsx(Button, { onClick: () => onSave(currentValue), children: "Save Changes" }) })] }));
}
//# sourceMappingURL=PropertyEditor.js.map