import globals from '../globals';
import { MultiSelectComboBoxClass } from '../../components/descope-multi-select-combo-box/MultiSelectComboBoxClass';
import { getThemeRefs } from '../../helpers/themeHelpers';
import { refs } from './inputWrapper';

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

export const multiSelectComboBox = {
  [vars.hostWidth]: refs.width,
  [vars.hostDirection]: refs.direction,
  [vars.fontSize]: refs.fontSize,
  [vars.fontFamily]: refs.fontFamily,
  [vars.labelFontSize]: refs.labelFontSize,
  [vars.labelFontWeight]: refs.labelFontWeight,
  [vars.labelTextColor]: refs.labelTextColor,
  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
  [vars.inputBorderColor]: refs.borderColor,
  [vars.inputBorderWidth]: refs.borderWidth,
  [vars.inputBorderStyle]: refs.borderStyle,
  [vars.inputBorderRadius]: refs.borderRadius,
  [vars.inputOutlineColor]: refs.outlineColor,
  [vars.inputOutlineOffset]: refs.outlineOffset,
  [vars.inputOutlineWidth]: refs.outlineWidth,
  [vars.inputOutlineStyle]: refs.outlineStyle,
  [vars.labelRequiredIndicator]: refs.requiredIndicator,
  [vars.inputValueTextColor]: refs.valueTextColor,
  [vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
  [vars.inputBackgroundColor]: refs.backgroundColor,
  [vars.inputHorizontalPadding]: refs.horizontalPadding,
  [vars.inputVerticalPadding]: refs.verticalPadding,
  [vars.inputHeight]: refs.inputHeight,
  [vars.inputDropdownButtonColor]: globalRefs.colors.surface.dark,
  [vars.inputDropdownButtonCursor]: 'pointer',
  [vars.inputDropdownButtonSize]: refs.toggleButtonSize,
  [vars.inputDropdownButtonOffset]: globalRefs.spacing.xs,
  [vars.overlayItemPaddingInlineStart]: globalRefs.spacing.xs,
  [vars.overlayItemPaddingInlineEnd]: globalRefs.spacing.lg,
  [vars.chipFontSize]: refs.chipFontSize,
  [vars.chipTextColor]: globalRefs.colors.surface.contrast,
  [vars.chipBackgroundColor]: globalRefs.colors.surface.light,
  [vars.labelPosition]: refs.labelPosition,
  [vars.labelTopPosition]: refs.labelTopPosition,
  [vars.labelLeftPosition]: refs.labelLeftPosition,
  [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
  [vars.inputTransformY]: refs.inputTransformY,
  [vars.inputTransition]: refs.inputTransition,
  [vars.marginInlineStart]: refs.marginInlineStart,
  [vars.placeholderOpacity]: refs.placeholderOpacity,
  [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,

  // error message icon
  [vars.errorMessageIcon]: refs.errorMessageIcon,
  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
  [vars.errorMessageFontSize]: refs.errorMessageFontSize,

  labelType: {
    floating: {
      [vars.inputHorizontalPadding]: '0.25em',
      _hasValue: {
        [vars.inputHorizontalPadding]: '0.45em',
      },
    },
  },

  _readonly: {
    [vars.inputDropdownButtonCursor]: 'default',
  },

  // Overlay theme exposed via the component:
  [vars.overlayFontSize]: refs.fontSize,
  [vars.overlayFontFamily]: refs.fontFamily,
  [vars.overlayCursor]: 'pointer',
  [vars.overlayItemBoxShadow]: 'none',
  [vars.overlayBackground]: refs.backgroundColor,
  [vars.overlayTextColor]: refs.valueTextColor,

  // Overlay direct theme:
  [vars.overlay.minHeight]: '400px',
  [vars.overlay.margin]: '0',
};

export default multiSelectComboBox;
export { vars };
