import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { useState } from 'react';
import { Badge } from './Badge';
import { Input } from './shadcn/input';
import { Styles } from './styles';
export function InputList({ value = [], onChange, className, delimiters = ", ", placeholder, autoFocus }) {
    const [text, setText] = useState('');
    const onBlur = (ev) => {
        const v = ev.target.value;
        if (v && v.trim()) {
            onChange([...value, v.trim()]);
            setText('');
        }
    };
    const onKeyDown = (ev) => {
        const v = ev.target.value;
        const isEmpty = !v.trim();
        const key = ev.key;
        if (key === 'Enter' || delimiters.indexOf(key) > -1) {
            ev.preventDefault();
            if (value && !isEmpty) {
                onChange([...value, v.trim()]);
                setText('');
            }
        }
        else if (key === 'Backspace' && isEmpty) {
            if (value && value.length > 0) {
                value.pop();
                onChange([...value]);
            }
        }
    };
    const _onClick = (index) => {
        if (value && value.length > 0) {
            value.splice(index, 1);
            onChange([...value]);
        }
    };
    return (_jsxs("div", { className: clsx(className, 'w-full flex flex-wrap items-center gap-1 p-2', Styles.INPUT), children: [value && value.length > 0 &&
                (value.map((v, index) => _jsx(Badge, { variant: "secondary", onClick: () => _onClick(index), className: 'cursor-pointer', title: v, children: _jsx("span", { className: 'break-all', children: v }) }, index))), _jsx(Input, { clearable: false, className: 'placeholder:text-muted-foreground px-1 min-w-0 flex-shrink-0 min-w-[120px]', variant: 'unstyled', type: 'text', value: text, onBlur: onBlur, onKeyDown: onKeyDown, onChange: setText, placeholder: !value || value.length === 0 ? placeholder : '', autoFocus: autoFocus })] }));
}
//# sourceMappingURL=InputList.js.map