'use client';
import clsx from 'clsx';
import { useEffect, useState, } from 'react';
import { generateUniqueId } from '../../../utils';
import { Each } from '../../00-base';
import { RenderErrorOrHelperText } from '../Input/utils/RenderErrorOrHelperText';
import { Paragraph } from '../Paragraph';
/**
 * Radio component for rendering a group of radio buttons with labels, helper text, and error message.
 *
 * @component
 * @example
 * // Example usage of Radio component
 * <Radio
 *   label="Select an option"
 *   options={{ option1: 'Option 1', option2: 'Option 2' }}
 *   radio={{ name: 'example', value: 'option1', onChange: () => console.log('Radio changed') }}
 *   helperText="Please select one option"
 *   error="This field is required"
 *   orientation="vertical"
 * />
 *
 * @param {Object} props - The properties of the Radio component.
 * @param {string} props.label - The label text for the radio group.
 * @param {Record<string, string>} props.options - The options for the radio buttons, where the key is the value and the value is the display text.
 * @param {Omit<InputHTMLAttributes<HTMLInputElement>, 'checked'>} props.radio - The properties for the radio input elements.
 * @param {string} [props.helperText] - Optional helper text to be displayed below the radio group.
 * @param {string} [props.error] - Optional error message to be displayed below the radio group.
 * @param {'vertical' | 'horizontal'} [props.orientation='vertical'] - The orientation of the radio buttons.
 *
 * @returns {ReactNode} The rendered Radio component.
 */
export function Radio({ label, options, radio, helperText, error, orientation = 'vertical', }) {
    const optionsArr = Object.entries(options);
    const [ids, setIds] = useState(new Array(optionsArr.length).fill({
        radio: {},
        label: {},
    }));
    const radioClasses = clsx('relative h-4 w-4 cursor-pointer border-2 outline-hidden', error && !radio.disabled ? 'accent-error' : 'accent-black', !radio.disabled &&
        'before:absolute before:-top-1 before:-left-1 before:h-6 before:w-6 before:rounded-full before:bg-transparent before:transition hover:before:bg-black/15', radio.className);
    const labelClasses = clsx('cursor-pointer p-2 text-sm', error ? 'text-error' : 'text-black', radio.disabled && 'text-gray-3');
    useEffect(() => {
        setIds((prevIds) => {
            if (prevIds.length === optionsArr.length) {
                return prevIds;
            }
            return optionsArr.map(() => {
                const id = generateUniqueId();
                return {
                    radio: { id },
                    label: { htmlFor: id },
                };
            });
        });
    }, [optionsArr]);
    return (<div className="w-full max-w-full">
      <Paragraph size="body-1" className="pb-1.5">
        {label}
      </Paragraph>
      <div className={clsx('flex', orientation === 'vertical' ? 'flex-col' : 'flex-row gap-4')}>
        <Each of={optionsArr} render={([value, text], index) => {
            return (<div className="flex items-center" key={value}>
                <input {...radio} {...ids[index].radio} type="radio" className={radioClasses} value={value} checked={radio.value === value}/>
                <label {...ids[index].label} className={labelClasses}>
                  {text}
                </label>
              </div>);
        }}/>
      </div>
      <RenderErrorOrHelperText disabled={radio.disabled} helperText={helperText} error={error}/>
    </div>);
}
//# sourceMappingURL=Radio.jsx.map