import { DateFieldClass } from '../../components/descope-date-field/DateFieldClass';
import { refs } from './inputWrapper';
import globals from '../globals';
import { getThemeRefs } from '../../helpers/themeHelpers';

const globalRefs = getThemeRefs(globals);
const shadowColor = '#00000020';
const { shadow } = globalRefs;

const vars = DateFieldClass.cssVarList;

const dateField = {
  [vars.hostWidth]: refs.width,
  [vars.hostDirection]: refs.direction,
  [vars.iconMargin]: '0.375em',

  [vars.overlay.marginTop]: `calc(${refs.outlineWidth} + 1px)`,
  [vars.overlay.backgroundColor]: refs.backgroundColor,
  [vars.overlay.backdropBackgroundColor]: 'transparent',
  [vars.overlay.backdropPointerEvents]: 'all',
  [vars.overlay.boxShadow]: `${shadow.wide.xl} ${shadowColor}, ${shadow.narrow.xl} ${shadowColor}`,
  [vars.overlay.outlineWidth]: '0',
  [vars.overlay.outlineColor]: 'transparent',
  [vars.overlay.outlineStyle]: 'none',
  [vars.overlay.padding]: '0',

  [vars.rtlInputDirection]: 'ltr',
  [vars.rtlInputAlignment]: 'right',

  [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.labelFontWeight]: refs.labelFontWeight,
  [vars.inputValueFontWeight]: refs.inputValueFontWeight,
  [vars.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
  [vars.helperTextFontWeight]: refs.helperTextFontWeight,
  [vars.errorMessageFontWeight]: refs.errorMessageFontWeight,
};

export default dateField;
export { vars };
