'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { arrayMove } from '@dnd-kit/sortable';
import { getTranslation } from '@payloadcms/translations';
import React, { useEffect, useId } from 'react';
import Select from 'react-select';
import CreatableSelect from 'react-select/creatable';
import { useTranslation } from '../../providers/Translation/index.js';
import { DraggableSortable } from '../DraggableSortable/index.js';
import { ShimmerEffect } from '../ShimmerEffect/index.js';
import { ClearIndicator } from './ClearIndicator/index.js';
import { Control } from './Control/index.js';
import { DropdownIndicator } from './DropdownIndicator/index.js';
import './index.scss';
import { Input } from './Input/index.js';
import { generateMultiValueDraggableID, 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 uuid = useId();
    const [hasMounted, setHasMounted] = React.useState(false);
    useEffect(()=>{
        setHasMounted(true);
    }, []);
    const { className, components, customProps, disabled = false, filterOption = undefined, getOptionValue, isClearable = true, isCreatable, isLoading, isSearchable = true, noOptionsMessage = ()=>t('general:noOptions'), numberOnly = false, onChange, onMenuClose, onMenuOpen, options, placeholder = t('general:selectValue'), showError, value } = props;
    const loadingMessage = ()=>t('general:loading') + '...';
    const classes = [
        className,
        'react-select',
        showError && 'react-select--error'
    ].filter(Boolean).join(' ');
    const styles = {
        // Remove the default react-select z-index from the menu so that our custom
        // z-index in the "payload-default" css layer can take effect, in such a way
        // that end users can easily override it as with other styles.
        menu: (rsStyles)=>({
                ...rsStyles,
                zIndex: undefined
            })
    };
    if (!hasMounted) {
        return /*#__PURE__*/ _jsxDEV(ShimmerEffect, {
            height: "calc(var(--base) * 2 + 2px)"
        }, void 0, false, {
            fileName: "src/elements/ReactSelect/index.tsx",
            lineNumber: 78,
            columnNumber: 12
        }, this);
    }
    if (!isCreatable) {
        return /*#__PURE__*/ _jsxDEV(Select, {
            captureMenuScroll: true,
            customProps: customProps,
            isLoading: isLoading,
            ...props,
            className: classes,
            classNamePrefix: "rs",
            components: {
                ClearIndicator,
                Control,
                DropdownIndicator,
                Input,
                MultiValue,
                MultiValueLabel,
                MultiValueRemove,
                SingleValue,
                ValueContainer,
                ...components
            },
            filterOption: filterOption,
            getOptionValue: getOptionValue,
            instanceId: uuid,
            isClearable: isClearable,
            isDisabled: disabled,
            isSearchable: isSearchable,
            loadingMessage: loadingMessage,
            menuPlacement: "auto",
            noOptionsMessage: noOptionsMessage,
            onChange: onChange,
            onMenuClose: onMenuClose,
            onMenuOpen: onMenuOpen,
            options: options,
            placeholder: getTranslation(placeholder, i18n),
            styles: styles,
            unstyled: true,
            value: value
        }, void 0, false, {
            fileName: "src/elements/ReactSelect/index.tsx",
            lineNumber: 83,
            columnNumber: 7
        }, this);
    }
    const handleKeyDown = (event)=>{
        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;
        }
        if (event.nativeEvent.isComposing) {
            return;
        }
        switch(event.key){
            case 'Enter':
            case 'Tab':
                onChange([
                    ...value,
                    createOption(inputValue)
                ]);
                setInputValue('');
                event.preventDefault();
                break;
            default:
                break;
        }
    };
    return /*#__PURE__*/ _jsxDEV(CreatableSelect, {
        captureMenuScroll: true,
        isLoading: isLoading,
        ...props,
        className: classes,
        classNamePrefix: "rs",
        components: {
            ClearIndicator,
            Control,
            DropdownIndicator,
            Input,
            MultiValue,
            MultiValueLabel,
            MultiValueRemove,
            SingleValue,
            ValueContainer,
            ...components
        },
        filterOption: filterOption,
        inputValue: inputValue,
        instanceId: uuid,
        isClearable: isClearable,
        isDisabled: disabled,
        isSearchable: isSearchable,
        loadingMessage: loadingMessage,
        menuPlacement: "auto",
        noOptionsMessage: noOptionsMessage,
        onChange: onChange,
        onInputChange: (newValue)=>setInputValue(newValue),
        onKeyDown: handleKeyDown,
        onMenuClose: onMenuClose,
        onMenuOpen: onMenuOpen,
        options: options,
        placeholder: getTranslation(placeholder, i18n),
        styles: styles,
        unstyled: true,
        value: value
    }, void 0, false, {
        fileName: "src/elements/ReactSelect/index.tsx",
        lineNumber: 163,
        columnNumber: 5
    }, this);
};
const SortableSelect = (props)=>{
    const { getOptionValue, onChange, value } = props;
    let draggableIDs = [];
    if (value) {
        draggableIDs = (Array.isArray(value) ? value : [
            value
        ]).map((optionValue)=>{
            return generateMultiValueDraggableID(optionValue, getOptionValue);
        });
    }
    return /*#__PURE__*/ _jsxDEV(DraggableSortable, {
        className: "react-select-container",
        ids: draggableIDs,
        onDragEnd: ({ moveFromIndex, moveToIndex })=>{
            let sorted = value;
            if (value && Array.isArray(value)) {
                sorted = arrayMove(value, moveFromIndex, moveToIndex);
            }
            onChange(sorted);
        },
        children: /*#__PURE__*/ _jsxDEV(SelectAdapter, {
            ...props
        }, void 0, false, {
            fileName: "src/elements/ReactSelect/index.tsx",
            lineNumber: 226,
            columnNumber: 7
        }, this)
    }, void 0, false, {
        fileName: "src/elements/ReactSelect/index.tsx",
        lineNumber: 215,
        columnNumber: 5
    }, this);
};
export const ReactSelect = (props)=>{
    const { isMulti, isSortable } = props;
    if (isMulti && isSortable) {
        return /*#__PURE__*/ _jsxDEV(SortableSelect, {
            ...props
        }, void 0, false, {
            fileName: "src/elements/ReactSelect/index.tsx",
            lineNumber: 235,
            columnNumber: 12
        }, this);
    }
    return /*#__PURE__*/ _jsxDEV(SelectAdapter, {
        ...props
    }, void 0, false, {
        fileName: "src/elements/ReactSelect/index.tsx",
        lineNumber: 238,
        columnNumber: 10
    }, this);
};

//# sourceMappingURL=index.js.map