'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { getTranslation } from '@payloadcms/translations';
import React from 'react';
import { ReactSelect } from '../../elements/ReactSelect/index.js';
import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
import { FieldDescription } from '../../fields/FieldDescription/index.js';
import { FieldError } from '../../fields/FieldError/index.js';
import { FieldLabel } from '../../fields/FieldLabel/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import { fieldBaseClass } from '../shared/index.js';
import './index.scss';
export const SelectInput = (props)=>{
    const { id, AfterInput, BeforeInput, className, Description, description, Error, filterOption, hasMany = false, isClearable = true, isSortable = true, label, Label, localized, onChange, onInputChange, options, path, placeholder, readOnly, required, showError, style, value } = props;
    const { i18n } = useTranslation();
    let valueToRender;
    if (hasMany && Array.isArray(value)) {
        valueToRender = value.map((val)=>{
            const matchingOption = options.find((option)=>option.value === val);
            return {
                label: matchingOption ? getTranslation(matchingOption.label, i18n) : val,
                value: matchingOption?.value ?? val
            };
        });
    } else if (value) {
        const matchingOption = options.find((option)=>option.value === value);
        valueToRender = {
            label: matchingOption ? getTranslation(matchingOption.label, i18n) : value,
            value: matchingOption?.value ?? value
        };
    } else {
        // If value is not present then render nothing, allowing select fields to reset to their initial 'Select an option' state
        valueToRender = null;
    }
    return /*#__PURE__*/ _jsxDEV("div", {
        className: [
            fieldBaseClass,
            'select',
            className,
            showError && 'error',
            readOnly && 'read-only'
        ].filter(Boolean).join(' '),
        id: `field-${path.replace(/\./g, '__')}`,
        style: style,
        children: [
            /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                CustomComponent: Label,
                Fallback: /*#__PURE__*/ _jsxDEV(FieldLabel, {
                    label: label,
                    localized: localized,
                    path: path,
                    required: required
                }, void 0, false, {
                    fileName: "src/fields/Select/Input.tsx",
                    lineNumber: 114,
                    columnNumber: 11
                }, void 0)
            }, void 0, false, {
                fileName: "src/fields/Select/Input.tsx",
                lineNumber: 111,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${fieldBaseClass}__wrap`,
                children: [
                    /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                        CustomComponent: Error,
                        Fallback: /*#__PURE__*/ _jsxDEV(FieldError, {
                            path: path,
                            showError: showError
                        }, void 0, false, {
                            fileName: "src/fields/Select/Input.tsx",
                            lineNumber: 120,
                            columnNumber: 21
                        }, void 0)
                    }, void 0, false, {
                        fileName: "src/fields/Select/Input.tsx",
                        lineNumber: 118,
                        columnNumber: 9
                    }, this),
                    BeforeInput,
                    /*#__PURE__*/ _jsxDEV(ReactSelect, {
                        disabled: readOnly,
                        filterOption: filterOption,
                        id: id,
                        isClearable: isClearable,
                        isMulti: hasMany,
                        isSortable: isSortable,
                        onChange: onChange,
                        onInputChange: onInputChange,
                        options: options.map((option)=>({
                                ...option,
                                label: getTranslation(option.label, i18n)
                            })),
                        placeholder: placeholder,
                        showError: showError,
                        value: valueToRender
                    }, void 0, false, {
                        fileName: "src/fields/Select/Input.tsx",
                        lineNumber: 123,
                        columnNumber: 9
                    }, this),
                    AfterInput
                ]
            }, void 0, true, {
                fileName: "src/fields/Select/Input.tsx",
                lineNumber: 117,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                CustomComponent: Description,
                Fallback: /*#__PURE__*/ _jsxDEV(FieldDescription, {
                    description: description,
                    path: path
                }, void 0, false, {
                    fileName: "src/fields/Select/Input.tsx",
                    lineNumber: 144,
                    columnNumber: 19
                }, void 0)
            }, void 0, false, {
                fileName: "src/fields/Select/Input.tsx",
                lineNumber: 142,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/fields/Select/Input.tsx",
        lineNumber: 98,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=Input.js.map