import { PhoneFieldInputBoxClass } from '../../components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass';
import { refs } from './inputWrapper';

const vars = PhoneFieldInputBoxClass.cssVarList;

const phoneInputBoxField = {
  [vars.hostWidth]: '16em',
  [vars.hostMinWidth]: refs.minWidth,
  [vars.hostDirection]: refs.direction,
  [vars.fontSize]: refs.fontSize,
  [vars.fontFamily]: refs.fontFamily,
  [vars.labelFontSize]: refs.labelFontSize,
  [vars.labelFontWeight]: refs.labelFontWeight,
  [vars.inputValueFontWeight]: refs.inputValueFontWeight,
  [vars.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
  [vars.helperTextFontWeight]: refs.helperTextFontWeight,
  [vars.errorMessageFontWeight]: refs.errorMessageFontWeight,
  [vars.labelTextColor]: refs.labelTextColor,
  [vars.labelRequiredIndicator]: refs.requiredIndicator,
  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
  [vars.inputValueTextColor]: refs.valueTextColor,
  [vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
  [vars.inputBorderStyle]: refs.borderStyle,
  [vars.inputBorderWidth]: refs.borderWidth,
  [vars.inputBorderColor]: refs.borderColor,
  [vars.inputBorderRadius]: refs.borderRadius,
  [vars.inputOutlineStyle]: refs.outlineStyle,
  [vars.inputOutlineWidth]: refs.outlineWidth,
  [vars.inputOutlineColor]: refs.outlineColor,
  [vars.inputOutlineOffset]: refs.outlineOffset,
  [vars.labelPosition]: refs.labelPosition,
  [vars.labelTopPosition]: refs.labelTopPosition,
  [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
  [vars.inputTransformY]: refs.inputTransformY,
  [vars.inputTransition]: refs.inputTransition,
  [vars.marginInlineStart]: refs.marginInlineStart,
  [vars.valueInputHeight]: refs.valueInputHeight,
  [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
  [vars.inputHorizontalPadding]: '0',

  // 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,

  _fullWidth: {
    [vars.hostWidth]: refs.width,
  },
};

export default phoneInputBoxField;
export { vars };
