'use client';
import { XMarkIcon } from '@heroicons/react/24/solid';
import * as React from 'react';
import { PHXBox } from '../Box';
import { PHXTextV2 } from '../TextV2';
import ErrorMessage from '../../commons/ErrorMessage';
const PHXInputTags = React.forwardRef(({ helpText, label, messageError, onChange, validate, value, ...props }, ref) => {
    const [pendingDataPoint, setPendingDataPoint] = React.useState('');
    const [error, setError] = React.useState(messageError);
    React.useEffect(() => {
        setError(messageError);
    }, [messageError]);
    const addPendingDataPoint = (newOption) => {
        const dataToAdd = newOption ? newOption.value : pendingDataPoint.trim();
        if (!dataToAdd)
            return;
        if ((validate === null || validate === void 0 ? void 0 : validate.regex) && !validate.regex.test(dataToAdd)) {
            setError(validate.message);
            return;
        }
        if ((validate === null || validate === void 0 ? void 0 : validate.validator) && !validate.validator(dataToAdd)) {
            setError(validate.message);
            return;
        }
        if (value.includes(dataToAdd)) {
            setError(`"${dataToAdd}" đã được thêm trước đó`);
            return;
        }
        setError(undefined);
        if (newOption) {
            if (!value.includes(newOption.value)) {
                onChange([...value, newOption.value]);
                setPendingDataPoint('');
            }
        }
        else if (pendingDataPoint) {
            const trimmed = pendingDataPoint.trim();
            if (!trimmed)
                return;
            if (!value.includes(trimmed)) {
                onChange([...value, trimmed]);
                setPendingDataPoint('');
            }
        }
    };
    return (React.createElement("div", { className: 'relative' },
        label && (React.createElement(PHXBox, { mb: 'tight' },
            React.createElement(PHXTextV2, { size: 'caption' }, label))),
        React.createElement("div", { className: `shadow-sm block w-full flex-wrap gap-2 rounded-lg border-[0.5px] ${error
                ? 'border-red-800 bg-red-50 focus-within:border-red-800 focus-within:bg-red-50 hover:bg-red-50'
                : 'border-gray-500 focus-within:border-gray-500 focus-within:bg-gray-50 focus-within:outline-none focus-within:outline-offset-1 focus-within:outline-indigo-500 focus-within:ring-transparent hover:bg-gray-50'} ` },
            value.length > 0 && (React.createElement("div", { className: 'mx-2 mt-2 flex flex-wrap items-center gap-2' }, value.map((val) => (React.createElement("div", { key: val, className: 'flex items-center text-wrap rounded-xl bg-gray-200 pl-2 ' },
                React.createElement(PHXTextV2, { size: 'caption' }, val),
                React.createElement("button", { className: 'ml-[2px] rounded-xl p-[3px] hover:cursor-pointer hover:bg-gray-300', onClick: () => onChange(value.filter((i) => i !== val)), type: 'button' },
                    React.createElement(XMarkIcon, { className: 'h-4 w-4' }))))))),
            React.createElement("input", { className: 'w-full rounded-lg border-none border-transparent bg-transparent py-[0.4rem] pl-3 text-xs outline-none focus:border-none focus:border-transparent focus:ring-0', onChange: (e) => {
                    setPendingDataPoint(e.target.value);
                }, onKeyDown: (e) => {
                    if (e.key === 'Enter' || e.key === ',') {
                        e.preventDefault();
                        addPendingDataPoint();
                    }
                    else if (e.key === 'Backspace' && pendingDataPoint.length === 0 && value.length > 0) {
                        e.preventDefault();
                        onChange(value.slice(0, -1));
                    }
                }, value: pendingDataPoint, ...props, ref: ref })),
        error && (React.createElement(PHXBox, { mt: 'tight' },
            React.createElement(ErrorMessage, { message: error }))),
        helpText && (React.createElement(PHXBox, { mt: 'tight' },
            React.createElement(PHXTextV2, { color: 'subdued', size: 'caption' }, helpText)))));
});
PHXInputTags.displayName = 'PHXInputTags';
export { PHXInputTags };
//# sourceMappingURL=input-tags.js.map