import React, { useCallback, useRef, useState } from 'react';
import { CellTextInput, CellAutoCompleteInput, } from '@wix/patterns-fields';
import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
import { st, classes } from './Edit.st.css.js';
function getMaxLength(validation) {
    return validation?.find((r) => r.type === 'maxLength')?.value;
}
function getSpecificValues(validation) {
    return validation?.find((r) => r.type === 'specificValues')?.values;
}
// Plain text mode
const TextEditPlain = ({ value, onChange, onCommit, onCancel, inputRef, validation, }) => {
    const maxLength = getMaxLength(validation);
    const [isFocused, setIsFocused] = useState(false);
    const handleKeyDown = useCallback((e) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            onCommit();
        }
        else if (e.key === 'Escape') {
            e.preventDefault();
            onCancel();
        }
    }, [onCommit, onCancel]);
    const handleFocus = useCallback(() => setIsFocused(true), []);
    const handleBlur = useCallback(() => {
        setIsFocused(false);
        onCommit();
    }, [onCommit]);
    return (React.createElement("div", { className: classes.editWrapper },
        React.createElement(CellTextInput, { inputRef: inputRef, value: value ?? '', onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, maxLength: maxLength, className: st(classes.inputArea, { isFocused }) })));
};
// Specific values mode — autocomplete with a closed list of options
const TextEditSpecificValues = ({ value, onChange, onCommit, onCancel, inputRef, editTrigger, options, }) => {
    const acHandle = useRef(null);
    const wrapperRef = useRef(null);
    const closeDropdown = useCallback(() => acHandle.current?.hideOptions(), []);
    useCloseOnAncestorScroll(wrapperRef, closeDropdown, !!editTrigger);
    // Set in capture phase on ArrowUp/Down so onOptionMarked only updates
    // editingValue for explicit arrow navigation — not for auto-highlight on open.
    const isArrowNavRef = useRef(false);
    const handleSelect = useCallback((id) => {
        onChange(id);
        onCommit();
    }, [onChange, onCommit]);
    const handleClear = useCallback(() => onChange(''), [onChange]);
    const handleOptionMarked = useCallback((id) => {
        if (id && isArrowNavRef.current) {
            onChange(id);
            isArrowNavRef.current = false;
        }
    }, [onChange]);
    // Capture phase: set arrow-nav flag before AutoComplete fires onOptionMarked,
    // and cancel on Escape before the dropdown processes it.
    const handleKeyDownCapture = useCallback((e) => {
        if (e.key === 'Escape') {
            e.preventDefault();
            e.stopPropagation();
            onCancel();
        }
        else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
            isArrowNavRef.current = true;
        }
    }, [onCancel]);
    return (React.createElement("div", { ref: wrapperRef, className: classes.editWrapper, onKeyDownCapture: handleKeyDownCapture },
        React.createElement(CellAutoCompleteInput, { ref: acHandle, value: value || undefined, options: options, initialSearchText: editTrigger &&
                typeof editTrigger === 'object' &&
                editTrigger.kind === 'type'
                ? editTrigger.key
                : undefined, autoOpen: !!editTrigger, onSelect: handleSelect, onClear: handleClear, onOptionMarked: handleOptionMarked, inputRef: inputRef, className: classes.inputArea })));
};
export const TextEdit = (props) => {
    const specificValues = getSpecificValues(props.validation);
    if (specificValues) {
        return React.createElement(TextEditSpecificValues, { ...props, options: specificValues });
    }
    return React.createElement(TextEditPlain, { ...props });
};
//# sourceMappingURL=Edit.js.map