'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { optionIsObject } from 'payload/shared';
import React, { useCallback, useMemo } from 'react';
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 { useForm } from '../../forms/Form/context.js';
import { useField } from '../../forms/useField/index.js';
import { withCondition } from '../../forms/withCondition/index.js';
import { mergeFieldStyles } from '../mergeFieldStyles.js';
import './index.scss';
import { fieldBaseClass } from '../shared/index.js';
import { Radio } from './Radio/index.js';
const baseClass = 'radio-group';
const RadioGroupFieldComponent = (props)=>{
    const { disableModifyingForm: disableModifyingFormFromProps, field, field: { admin: { className, description, layout = 'horizontal' } = {}, label, localized, options = [], required } = {}, onChange: onChangeFromProps, path: pathFromProps, readOnly, validate, value: valueFromProps } = props;
    const { uuid } = useForm();
    const memoizedValidate = useCallback((value, validationOptions)=>{
        if (typeof validate === 'function') {
            return validate(value, {
                ...validationOptions,
                options,
                required
            });
        }
    }, [
        validate,
        options,
        required
    ]);
    const { customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {}, disabled, path, setValue, showError, value: valueFromContext } = useField({
        potentiallyStalePath: pathFromProps,
        validate: memoizedValidate
    });
    const value = valueFromContext || valueFromProps;
    const styles = useMemo(()=>mergeFieldStyles(field), [
        field
    ]);
    return /*#__PURE__*/ _jsxDEV("div", {
        className: [
            fieldBaseClass,
            baseClass,
            className,
            `${baseClass}--layout-${layout}`,
            showError && 'error',
            (readOnly || disabled) && `${baseClass}--read-only`
        ].filter(Boolean).join(' '),
        style: styles,
        children: [
            /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                CustomComponent: Error,
                Fallback: /*#__PURE__*/ _jsxDEV(FieldError, {
                    path: path,
                    showError: showError
                }, void 0, false, {
                    fileName: "src/fields/RadioGroup/index.tsx",
                    lineNumber: 86,
                    columnNumber: 19
                }, void 0)
            }, void 0, false, {
                fileName: "src/fields/RadioGroup/index.tsx",
                lineNumber: 84,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                CustomComponent: Label,
                Fallback: /*#__PURE__*/ _jsxDEV(FieldLabel, {
                    label: label,
                    localized: localized,
                    path: path,
                    required: required
                }, void 0, false, {
                    fileName: "src/fields/RadioGroup/index.tsx",
                    lineNumber: 91,
                    columnNumber: 11
                }, void 0)
            }, void 0, false, {
                fileName: "src/fields/RadioGroup/index.tsx",
                lineNumber: 88,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${fieldBaseClass}__wrap`,
                children: [
                    BeforeInput,
                    /*#__PURE__*/ _jsxDEV("ul", {
                        className: `${baseClass}--group`,
                        id: `field-${path.replace(/\./g, '__')}`,
                        children: options.map((option)=>{
                            let optionValue = '';
                            if (optionIsObject(option)) {
                                optionValue = option.value;
                            } else {
                                optionValue = option;
                            }
                            const isSelected = String(optionValue) === String(value);
                            const id = `field-${path}-${optionValue}${uuid ? `-${uuid}` : ''}`;
                            return /*#__PURE__*/ _jsxDEV("li", {
                                children: /*#__PURE__*/ _jsxDEV(Radio, {
                                    id: id,
                                    isSelected: isSelected,
                                    onChange: ()=>{
                                        if (typeof onChangeFromProps === 'function') {
                                            onChangeFromProps(optionValue);
                                        }
                                        if (!(readOnly || disabled)) {
                                            setValue(optionValue, !!disableModifyingFormFromProps);
                                        }
                                    },
                                    option: optionIsObject(option) ? option : {
                                        label: option,
                                        value: option
                                    },
                                    path: path,
                                    readOnly: readOnly || disabled,
                                    uuid: uuid
                                }, void 0, false, {
                                    fileName: "src/fields/RadioGroup/index.tsx",
                                    lineNumber: 112,
                                    columnNumber: 17
                                }, this)
                            }, `${path} - ${optionValue}`, false, {
                                fileName: "src/fields/RadioGroup/index.tsx",
                                lineNumber: 111,
                                columnNumber: 15
                            }, this);
                        })
                    }, void 0, false, {
                        fileName: "src/fields/RadioGroup/index.tsx",
                        lineNumber: 96,
                        columnNumber: 9
                    }, this),
                    AfterInput,
                    /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                        CustomComponent: Description,
                        Fallback: /*#__PURE__*/ _jsxDEV(FieldDescription, {
                            description: description,
                            path: path
                        }, void 0, false, {
                            fileName: "src/fields/RadioGroup/index.tsx",
                            lineNumber: 136,
                            columnNumber: 21
                        }, void 0)
                    }, void 0, false, {
                        fileName: "src/fields/RadioGroup/index.tsx",
                        lineNumber: 134,
                        columnNumber: 9
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/fields/RadioGroup/index.tsx",
                lineNumber: 94,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/fields/RadioGroup/index.tsx",
        lineNumber: 71,
        columnNumber: 5
    }, this);
};
export const RadioGroupField = withCondition(RadioGroupFieldComponent);

//# sourceMappingURL=index.js.map