'use client';
import { arrayMove } from '@dnd-kit/sortable';
import { getTranslation } from '@payloadcms/translations';
import React from 'react';
import Select from 'react-select';
import CreatableSelect from 'react-select/creatable';
import { Chevron } from '../../icons/Chevron/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import DraggableSortable from '../DraggableSortable/index.js';
import { ClearIndicator } from './ClearIndicator/index.js';
import { Control } from './Control/index.js';
import { MultiValue } from './MultiValue/index.js';
import { MultiValueLabel } from './MultiValueLabel/index.js';
import { MultiValueRemove } from './MultiValueRemove/index.js';
import { SingleValue } from './SingleValue/index.js';
import { ValueContainer } from './ValueContainer/index.js';
const createOption = (label)=>({
        label,
        value: label
    });
const SelectAdapter = (props)=>{
    const { i18n, t } = useTranslation();
    const [inputValue, setInputValue] = React.useState('') // for creatable select
    ;
    const { className, components, customProps, disabled = false, filterOption = undefined, isClearable = true, isCreatable, isLoading, isSearchable = true, noOptionsMessage, numberOnly = false, onChange, onMenuOpen, options, placeholder = t('general:selectValue'), showError, value } = props;
    const classes = [
        className,
        'react-select',
        showError && 'react-select--error'
    ].filter(Boolean).join(' ');
    if (!isCreatable) {
        return /*#__PURE__*/ React.createElement(Select, {
            captureMenuScroll: true,
            customProps: customProps,
            isLoading: isLoading,
            placeholder: getTranslation(placeholder, i18n),
            ...props,
            className: classes,
            classNamePrefix: "rs",
            components: {
                ClearIndicator,
                Control,
                DropdownIndicator: Chevron,
                MultiValue,
                MultiValueLabel,
                MultiValueRemove,
                SingleValue,
                ValueContainer,
                ...components
            },
            filterOption: filterOption,
            isClearable: isClearable,
            isDisabled: disabled,
            isSearchable: isSearchable,
            menuPlacement: "auto",
            noOptionsMessage: noOptionsMessage,
            onChange: onChange,
            onMenuOpen: onMenuOpen,
            options: options,
            value: value
        });
    }
    const handleKeyDown = (event)=>{
        // eslint-disable-next-line no-restricted-globals
        if (numberOnly === true) {
            const acceptableKeys = [
                'Tab',
                'Escape',
                'Backspace',
                'Enter',
                'ArrowRight',
                'ArrowLeft',
                'ArrowUp',
                'ArrowDown'
            ];
            const isNumber = !/\D/.test(event.key);
            const isActionKey = acceptableKeys.includes(event.key);
            if (!isNumber && !isActionKey) {
                event.preventDefault();
                return;
            }
        }
        if (!value || !inputValue || inputValue.trim() === '') return;
        if (filterOption && !filterOption(null, inputValue)) {
            return;
        }
        switch(event.key){
            case 'Enter':
            case 'Tab':
                onChange([
                    ...value,
                    createOption(inputValue)
                ]);
                setInputValue('');
                event.preventDefault();
                break;
            default:
                break;
        }
    };
    return /*#__PURE__*/ React.createElement(CreatableSelect, {
        captureMenuScroll: true,
        isLoading: isLoading,
        placeholder: getTranslation(placeholder, i18n),
        ...props,
        className: classes,
        classNamePrefix: "rs",
        components: {
            ClearIndicator,
            Control,
            DropdownIndicator: Chevron,
            MultiValue,
            MultiValueLabel,
            MultiValueRemove,
            SingleValue,
            ValueContainer,
            ...components
        },
        filterOption: filterOption,
        inputValue: inputValue,
        isClearable: isClearable,
        isDisabled: disabled,
        isSearchable: isSearchable,
        menuPlacement: "auto",
        noOptionsMessage: noOptionsMessage,
        onChange: onChange,
        onInputChange: (newValue)=>setInputValue(newValue),
        onKeyDown: handleKeyDown,
        onMenuOpen: onMenuOpen,
        options: options,
        value: value
    });
};
const SortableSelect = (props)=>{
    const { onChange, value } = props;
    let ids = [];
    if (value) ids = Array.isArray(value) ? value.map((item)=>item?.id ?? `${item?.value}`) : [
        value?.id || `${value?.value}`
    ];
    return /*#__PURE__*/ React.createElement(DraggableSortable, {
        className: "react-select-container",
        ids: ids,
        onDragEnd: ({ moveFromIndex, moveToIndex })=>{
            let sorted = value;
            if (value && Array.isArray(value)) {
                sorted = arrayMove(value, moveFromIndex, moveToIndex);
            }
            onChange(sorted);
        }
    }, /*#__PURE__*/ React.createElement(SelectAdapter, props));
};
const ReactSelect = (props)=>{
    const { isMulti, isSortable } = props;
    if (isMulti && isSortable) {
        return /*#__PURE__*/ React.createElement(SortableSelect, props);
    }
    return /*#__PURE__*/ React.createElement(SelectAdapter, props);
};
export default ReactSelect;

//# sourceMappingURL=index.js.map