import globals from '../globals';
import { NewPasswordClass } from '../../components/descope-new-password/NewPasswordClass';
import { refs } from './inputWrapper';
import { getThemeRefs } from '../../helpers/themeHelpers';

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

const newPassword = {
  [vars.hostWidth]: refs.width,
  [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.spaceBetweenInputs]: '1em',
  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
  [vars.policyPreviewBackgroundColor]: 'none',
  [vars.policyPreviewPadding]: globalRefs.spacing.lg,
  [vars.valueInputHeight]: refs.valueInputHeight,

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

  _required: {
    // NewPassword doesn't pass `required` attribute to its Password components.
    // That's why we fake the required indicator on each input.
    // We do that by injecting `::after` element, and populating it with requiredIndicator content.
    [vars.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
  },
};

export default newPassword;
export { vars };
