import * as React from 'react';
import { RadioProps } from '../Radio';

import { RadioAlignItems } from '../Radio/index.d';

export type RadioVAlign = RadioAlignItems;

export type RadioGroupDisplay = 'vertical' | 'horizontal';

export type RadioType = 'default' | 'button';
export type RadioSelectionArea = 'none' | 'hover' | 'always';
export type RadioSelectionAreaSkin = 'filled' | 'outlined';

export interface RadioGroupProps {
  children?: React.ReactNode;
  dataHook?: string;
  className?: string;
  onChange?: (value: RadioProps['value']) => void;
  value?: RadioProps['value'];
  disabledRadios?: RadioProps['value'][];
  vAlign?: RadioAlignItems;
  disabled?: RadioProps['disabled'];
  type?: RadioType;
  display?: RadioGroupDisplay;
  selectionArea?: RadioSelectionArea;
  selectionAreaSkin?: RadioSelectionAreaSkin;
  selectionAreaPadding?: React.CSSProperties['padding'];
  spacing?: string;
  name?: string;
  /** Makes component full width and divides all available horizontal space into even parts for each radio button */
  fullWidth?: boolean;
}

export default class RadioGroup extends React.PureComponent<RadioGroupProps> {
  static Radio: (
    props?: RadioProps & {
      content?: React.ReactNode;
      children?: React.ReactNode;
    },
  ) => React.ReactElement;
}