import { RadioGroupClass } from '../../../components/descope-radio-group/RadioGroupClass';
import { getThemeRefs } from '../../../helpers/themeHelpers';
import globals from '../../globals';
import { refs } from '../inputWrapper';

const vars = RadioGroupClass.cssVarList;
const globalRefs = getThemeRefs(globals);

export const radioGroup = {
  [vars.buttonsRowGap]: '9px',
  [vars.hostWidth]: refs.width,
  [vars.hostDirection]: refs.direction,
  [vars.fontSize]: refs.fontSize,
  [vars.fontFamily]: refs.fontFamily,
  [vars.labelTextColor]: refs.labelTextColor,
  [vars.labelRequiredIndicator]: refs.requiredIndicator,
  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
  [vars.errorMessageIcon]: refs.errorMessageIcon,
  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
  [vars.errorMessageFontSize]: refs.errorMessageFontSize,
  [vars.helperTextColor]: refs.helperTextColor,
  [vars.itemsLabelColor]: globalRefs.colors.surface.contrast,

  textAlign: {
    right: { [vars.inputTextAlign]: 'right' },
    left: { [vars.inputTextAlign]: 'left' },
    center: { [vars.inputTextAlign]: 'center' },
  },

  _fullWidth: {
    [vars.buttonsSpacing]: 'space-between',
  },

  _disabled: {
    [vars.itemsLabelColor]: globalRefs.colors.surface.light,
  },
};

export default radioGroup;
export { vars };
