import globals from '../globals';
import { getThemeRefs } from '../../helpers/themeHelpers';
import { SwitchToggleClass } from '../../components/boolean-fields/descope-switch-toggle/SwitchToggleClass';
import { refs } from './inputWrapper';

const knobMargin = '2px';
const checkboxHeight = '1.25em';

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

const switchToggle = {
  [vars.hostWidth]: refs.width,
  [vars.hostDirection]: refs.direction,
  [vars.fontSize]: refs.fontSize,
  [vars.fontFamily]: refs.fontFamily,

  [vars.inputOutlineWidth]: refs.outlineWidth,
  [vars.inputOutlineOffset]: refs.outlineOffset,
  [vars.inputOutlineColor]: refs.outlineColor,
  [vars.inputOutlineStyle]: refs.outlineStyle,

  [vars.trackBorderStyle]: refs.borderStyle,
  [vars.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
  [vars.trackBorderColor]: refs.borderColor,
  [vars.trackBackgroundColor]: refs.backgroundColor,
  [vars.trackBorderRadius]: globalRefs.radius.md,
  [vars.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
  [vars.trackHeight]: checkboxHeight,

  [vars.knobSize]: `calc(1em - ${knobMargin})`,
  [vars.knobRadius]: '50%',
  [vars.knobTopOffset]: '1px',
  [vars.knobLeftOffset]: knobMargin,
  [vars.knobColor]: refs.labelTextColor,
  [vars.knobTransitionDuration]: '0.3s',

  [vars.labelTextColor]: refs.labelTextColor,
  [vars.labelFontWeight]: '400',
  [vars.labelLineHeight]: '1.35em',
  [vars.labelSpacing]: '1em',
  [vars.labelRequiredIndicator]: refs.requiredIndicator,
  [vars.errorMessageTextColor]: refs.errorMessageTextColor,

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

  _checked: {
    [vars.trackBorderColor]: refs.borderColor,
    [vars.knobLeftOffset]: `calc(100% - var(${vars.knobSize}) - ${knobMargin})`,
    [vars.knobColor]: refs.valueTextColor,
    [vars.knobTextColor]: refs.valueTextColor,
  },

  _disabled: {
    [vars.knobColor]: globalRefs.colors.surface.light,
    [vars.trackBorderColor]: globalRefs.colors.surface.light,
    [vars.trackBackgroundColor]: globalRefs.colors.surface.main,
    [vars.labelTextColor]: refs.labelTextColor,
    _checked: {
      [vars.knobColor]: globalRefs.colors.surface.light,
      [vars.trackBackgroundColor]: globalRefs.colors.surface.main,
    },
  },

  _invalid: {
    [vars.trackBorderColor]: globalRefs.colors.error.main,
    [vars.knobColor]: globalRefs.colors.error.main,
  },
};

export default switchToggle;
export { vars };
