import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import classNames from 'classnames';
import { useCallback, useState, } from 'react';
import { CheckIcon } from '../../../lib/icons/Check.js';
import { CloseIcon } from '../../../lib/icons/Close.js';
import { EditIcon } from '../../../lib/icons/Edit.js';
export function EditableDeviceName({ onEdit, editable = true, tagName, value, ...props }) {
    const [editing, setEditing] = useState(false);
    const [errorText, setErrorText] = useState(null);
    const [currentValue, setCurrentValue] = useState(value);
    const Tag = (tagName ?? 'span');
    const handleCheck = useCallback(() => {
        const fixedName = fixName(currentValue);
        const valid = isValidName(fixedName);
        if (valid.type === 'error') {
            setErrorText(valid.message);
            return;
        }
        setEditing(false);
        setCurrentValue(fixedName);
        onEdit?.(fixedName);
    }, [currentValue, onEdit]);
    const handleChange = useCallback((event) => {
        setCurrentValue(event.target.value);
        setErrorText(null);
    }, []);
    const handleCancel = useCallback(() => {
        setEditing(false);
        setCurrentValue(value);
        setErrorText(null);
    }, [value]);
    const handleInputKeydown = useCallback((e) => {
        if (e.repeat)
            return;
        if (e.key === 'Enter') {
            handleCheck();
        }
        else if (e.key === 'Escape') {
            handleCancel();
        }
    }, [handleCheck, handleCancel]);
    return (_jsxs(Tag, { ...props, className: classNames('seam-editable-device-name', props.className), children: [_jsx(NameView, { editing: editing, value: currentValue, onChange: handleChange, onKeyDown: handleInputKeydown, errorText: errorText }), editable && (_jsx("span", { className: 'seam-editable-device-name-icon-wrapper', children: _jsx(ActionButtons, { editing: editing, onEdit: () => {
                        setEditing(true);
                    }, onCancel: handleCancel, onCheck: handleCheck }) }))] }));
}
function NameView(props) {
    if (!props.editing) {
        return _jsx("span", { children: props.value });
    }
    return (_jsxs("span", { className: 'seam-editable-device-name-input-wrapper', children: [_jsx("input", { type: 'text', defaultValue: props.value, onChange: props.onChange, onKeyDown: props.onKeyDown, ref: (el) => {
                    setTimeout(() => {
                        el?.focus();
                    }, 0);
                } }), props.errorText != null && (_jsx("span", { className: 'seam-editable-device-name-input-error', children: props.errorText }))] }));
}
function ActionButtons(props) {
    if (props.editing) {
        return (_jsxs(_Fragment, { children: [_jsx(IconButton, { onClick: props.onCheck, children: _jsx(CheckIcon, { width: '1em', height: '1em', viewBox: '0 0 24 24' }) }), _jsx(IconButton, { onClick: props.onCancel, children: _jsx(CloseIcon, { width: '1em', height: '1em', viewBox: '0 0 24 24' }) })] }));
    }
    return (_jsx(IconButton, { onClick: props.onEdit, children: _jsx(EditIcon, { width: '1em', height: '1em', viewBox: '0 0 24 24' }) }));
}
function IconButton(props) {
    return (_jsx("button", { ...props, type: 'button', className: classNames('seam-editable-device-name-icon-button', props.className), children: props.children }));
}
const fixName = (name) => {
    return name.replace(/\s+/g, ' ').trim();
};
const isValidName = (name) => {
    if (name.length < 2) {
        return {
            type: 'error',
            message: 'Name must be at least 2 characters long',
        };
    }
    if (name.length > 64) {
        return {
            type: 'error',
            message: 'Name must be at most 64 characters long',
        };
    }
    return {
        type: 'success',
    };
};
//# sourceMappingURL=EditableDeviceName.js.map