import React, { useId } from 'react';

import { FormRow } from '../../FormRow/FormRow';
import type { FormRowHelperTextOwnProps } from '../../FormRow/FormRowHelperText';
import { FormRowLabel } from '../../FormRow/FormRowLabel';
import type { RadioGroupOwnProps, SelectKey } from '../../Inputs/RadioGroup/RadioGroup';
import { RadioGroup } from '../../Inputs/RadioGroup/RadioGroup';

export interface RadioFieldProps<T extends object = object, V extends SelectKey = SelectKey>
  extends RadioGroupOwnProps<T, V>, Partial<FormRowHelperTextOwnProps> {
  /**
   * Renders a label for the entire group.
   */
  label: string;
  /**
   * Whether the label should be visually hidden.
   */
  hiddenLabel?: boolean;
}

export const RadioField = Object.assign(
  function RadioField<T extends object = object, V extends SelectKey = SelectKey>({
    id,
    name,
    label,
    hiddenLabel,
    error,
    warning,
    hint,
    value,
    defaultValue,
    onChange,
    disabled,
    disabledValues = [],
    getOptionValue,
    getOptionLabel,
    getOptionTooltip,
    options,
    required,
    renderOption,
    layout,
    orientation,
    minColumnWidth,
    gap,
    ...rest
  }: RadioFieldProps<T, V>) {
    rest satisfies Record<PropertyKey, never>;

    const baseId = useId();
    const descId = error || warning || hint ? `${baseId}-desc` : undefined;
    const labelId = `${baseId}-label`;

    const finalValidity = error ? 'error' : warning ? 'warning' : undefined;

    return (
      <FormRow as='div'>
        {!hiddenLabel && (
          <FormRowLabel as='span' id={labelId} required={required}>
            {label}
          </FormRowLabel>
        )}
        <div className='v2FormField__input'>
          <RadioGroup
            id={id}
            name={name}
            value={value}
            defaultValue={defaultValue}
            onChange={onChange}
            disabled={disabled}
            disabledValues={disabledValues}
            getOptionValue={getOptionValue}
            getOptionLabel={getOptionLabel}
            getOptionTooltip={getOptionTooltip}
            renderOption={renderOption}
            options={options}
            required={required}
            validity={finalValidity}
            aria-label={hiddenLabel ? label : undefined}
            aria-labelledby={hiddenLabel ? undefined : labelId}
            aria-describedby={descId}
            aria-errormessage={error ? descId : undefined}
            layout={layout}
            orientation={orientation}
            minColumnWidth={minColumnWidth}
            gap={gap}
            {...rest}
          />
          <FormRow.HelperText error={error} warning={warning} hint={hint} id={descId} />
        </div>
      </FormRow>
    );
  },
  {
    Option: RadioGroup.Option,
    ImageOption: RadioGroup.ImageOption,
  }
);