import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { useEffect, useRef, useState } from 'react';
import { SquarePen, Trash2 } from 'lucide-react';
import { Button, Styles, useClickOutside, useFlag } from '@vertesia/ui/core';
const VIEW_BOX = "block text-sm sm:leading-6 rounded-md border-0 py-1.5 px-4";
const VIEW_BOX_HOVER = `${VIEW_BOX} hover:shadow-xs hover:ring-1 hover:ring-inset hover:ring-ring`;
const EDIT_BOX = `${VIEW_BOX} shadow-xs ring-1 ring-inset ring-ring`;
export function Editable({ value, onChange, onDelete, outlineOnHover = false, editOnClick = true, placeholder, viewer, editor, skipClickOutside, isEditing = false, readonly = false, onValidate, }) {
    const { on, off, isOn } = useFlag(isEditing);
    const [validationError, setValidationError] = useState();
    const _onChange = (value) => {
        if (onValidate) {
            const err = onValidate(value);
            if (err) {
                setValidationError(err);
                return; // don't save
            }
            else {
                setValidationError(undefined);
            }
        }
        if (onChange(value)) {
            off();
        }
    };
    const _skipClickOutside = (e) => {
        if (skipClickOutside) {
            return skipClickOutside(e);
        }
        return false;
    };
    return (_jsxs("div", { className: "", children: [isOn && !readonly ?
                _jsx(DataEdit, { value: value, onSave: _onChange, onCancel: off, editor: editor, skipClickOutside: _skipClickOutside })
                : _jsx(DataView, { value: value, onEdit: on, viewer: viewer, placeholder: placeholder, outlineOnHover: outlineOnHover, editOnClick: editOnClick, onDelete: onDelete, readonly: readonly }), validationError &&
                _jsx("div", { className: "text-red-500 text-sm", children: validationError })] }));
}
function DataView({ viewer: Viewer, value, onEdit, editOnClick, outlineOnHover, placeholder, onDelete, readonly }) {
    const onClick = () => {
        editOnClick && onEdit();
    };
    const onKeyUp = (e) => {
        if (e.key === "Enter") {
            onEdit();
        }
    };
    const btnStyle = 'invisible group-hover:visible';
    return (_jsxs("div", { tabIndex: 0, onKeyUp: onKeyUp, onClick: onClick, className: clsx("flex justify-start items-center group", outlineOnHover ? VIEW_BOX_HOVER : VIEW_BOX, { 'cursor-pointer': editOnClick }), children: [_jsx(Viewer, { value: value, placeholder: placeholder }), _jsxs("div", { className: 'ml-auto flex space-x-2', children: [!readonly && onDelete &&
                        _jsx(Button, { variant: "ghost", size: "sm", className: btnStyle, onClick: onDelete, children: _jsx(Trash2, { className: "size-4" }) }), !readonly ?
                        _jsx(Button, { variant: "ghost", size: "sm", className: btnStyle, onClick: onEdit, children: _jsx(SquarePen, { className: "size-4" }) })
                        : null] })] }));
}
function DataEdit({ editor: Editor, value, onSave, onCancel, skipClickOutside }) {
    const [actualValue, setActualValue] = useState(value);
    const latestValue = useRef(value);
    const [debounceTimer, setDebounceTimer] = useState(null);
    const handleSave = () => {
        onSave(latestValue.current);
    };
    const ref = useClickOutside(handleSave, skipClickOutside);
    const _onChange = (value, autoSave = false) => {
        setActualValue(value);
        latestValue.current = value;
        if (autoSave) {
            if (debounceTimer) {
                clearTimeout(debounceTimer);
            }
            setDebounceTimer(setTimeout(() => { onSave(value); }, 500));
        }
    };
    return (_jsx("div", { ref: ref, children: _jsx("div", { className: EDIT_BOX, children: _jsx("div", { className: "w-full", onClick: (e) => e.stopPropagation(), children: _jsx(Editor, { value: actualValue, onChange: _onChange, onSave: handleSave, onCancel: onCancel }) }) }) }));
}
export function TextDataViewer({ value, placeholder }) {
    if (!value) {
        return (_jsx("span", { className: 'text-gray-400', children: placeholder || 'Missing value' }));
    }
    else {
        return (_jsx("span", { children: value == null ? '' : value.toString() }));
    }
}
export function TextDataEditor({ 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" } }));
}
export function EditableText(props) {
    if (!props.viewer) {
        props.viewer = TextDataViewer;
    }
    if (!props.editor) {
        props.editor = TextDataEditor;
    }
    return (_jsx(Editable, { ...props }));
}
//# sourceMappingURL=Editable.js.map