import globals from '../globals';
import { getThemeRefs, createHelperVars } from '../../helpers/themeHelpers';
import { getComponentName } from '../../helpers/componentHelpers';

const componentName = getComponentName('input-wrapper');
const globalRefs = getThemeRefs(globals);

const [theme, refs, vars] = createHelperVars(
  {
    labelTextColor: globalRefs.colors.surface.dark,
    labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
    labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
    inputValueFontWeight: '400',
    inputPlaceholderFontWeight: '400',
    helperTextFontWeight: '400',
    errorMessageFontWeight: '400',
    valueTextColor: globalRefs.colors.surface.contrast,
    placeholderTextColor: globalRefs.colors.surface.dark,
    requiredIndicator: "'*'",
    helperTextColor: globalRefs.colors.surface.dark,
    errorMessageTextColor: globalRefs.colors.error.main,
    successMessageTextColor: globalRefs.colors.success.main,

    borderWidth: globalRefs.border.xs,
    borderRadius: globalRefs.radius.xs,
    borderColor: 'transparent',

    outlineWidth: globalRefs.border.sm,
    outlineStyle: 'solid',
    outlineColor: 'transparent',
    outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes

    minWidth: '10em',
    toggleButtonSize: '1.5em',
    inputIconSize: '1em',
    inputHeight: '3em',
    horizontalPadding: '0.5em',
    verticalPadding: '0.5em',

    textAlign: 'start',

    backgroundColor: globalRefs.colors.surface.main,

    fontFamily: globalRefs.fonts.font1.family,

    direction: globalRefs.direction,

    overlayOpacity: '0.3',

    errorMessageIcon: '',
    errorMessageIconSize: '0',
    errorMessageIconPadding: '0',
    errorMessageIconPosition: '0 0.4em',
    errorMessageFontSize: '0.8125rem',
    errorMessageIconRepeat: 'no-repeat',

    size: {
      xs: { fontSize: '12px', chipFontSize: '10px' },
      sm: { fontSize: '14px', chipFontSize: '12px' },
      md: { fontSize: '16px', chipFontSize: '14px' },
      lg: { fontSize: '18px', chipFontSize: '16px' },
    },

    labelType: {
      static: {
        valueInputHeight: '3em',
        valueInputMarginBottom: 'auto',
      },
      floating: {
        labelPosition: 'absolute',
        labelTopPosition: '0',
        labelHorizontalPosition: '0.9em',
        labelFontSize: '1em',
        placeholderOpacity: 0,
        inputHeight: '3.5em',
        inputVerticalAlignment: 'flex-end',
        inputTransformY: 'translateY(1.55em)',
        inputTransition: 'all 75ms ease-in-out',
        marginInlineStart: '0',
        valueInputHeight: '1.5702em',
        valueInputMarginBottom: '0.5em',

        _focused: {
          labelFontSize: '0.75em',
          inputTransformY: 'translateY(1.05em)',
          labelFontWeight: '400',
          placeholderOpacity: 1,
        },

        _readOnly: {
          placeholderOpacity: 0,
        },

        _hasValue: {
          inputTransformY: 'translateY(1.05em)',
          labelFontSize: '0.75em',
          labelFontWeight: '400',
        },
      },
    },

    _fullWidth: {
      width: '100%',
    },

    _bordered: {
      outlineWidth: globalRefs.border.xs,
      borderColor: globalRefs.colors.surface.light,
      borderStyle: 'solid',
      _invalid: {
        borderColor: globalRefs.colors.error.main,
      },
    },

    _focused: {
      outlineColor: globalRefs.colors.surface.light,
      _invalid: {
        outlineColor: globalRefs.colors.error.main,
      },
    },

    _disabled: {
      labelTextColor: globalRefs.colors.surface.light,
      borderColor: globalRefs.colors.surface.light,
      valueTextColor: globalRefs.colors.surface.light,
      placeholderTextColor: globalRefs.colors.surface.light,
      helperTextColor: globalRefs.colors.surface.light,
      backgroundColor: globalRefs.colors.surface.main,
    },

    _obfuscated: {
      inputTextSecurity: 'disc',
    },
  },
  componentName
);

export { refs, vars };
export default theme;
