import globals from '../../globals';
import {
  LoaderRadialClass,
  componentName,
} from '../../../components/descope-loader-radial/LoaderRadialClass';
import { createHelperVars, getThemeRefs } from '../../../helpers/themeHelpers';

const globalRefs = getThemeRefs(globals);
const compVars = LoaderRadialClass.cssVarList;

const [helperTheme, helperRefs, helperVars] = createHelperVars(
  {
    spinnerColor: globalRefs.colors.surface.contrast,
    mode: {
      primary: {
        spinnerColor: globalRefs.colors.primary.main,
      },
      secondary: {
        spinnerColor: globalRefs.colors.secondary.main,
      },
    },
  },
  componentName
);

const loaderRadial = {
  ...helperTheme,

  [compVars.animationDuration]: '2s',
  [compVars.animationTimingFunction]: 'linear',
  [compVars.animationIterationCount]: 'infinite',
  [compVars.spinnerBorderStyle]: 'solid',
  [compVars.spinnerBorderWidth]: '0.2em',
  [compVars.spinnerBorderRadius]: '50%',
  [compVars.spinnerQuadrant1Color]: helperRefs.spinnerColor,
  [compVars.spinnerQuadrant2Color]: 'transparent',
  [compVars.spinnerQuadrant3Color]: helperRefs.spinnerColor,
  [compVars.spinnerQuadrant4Color]: 'transparent',

  size: {
    xs: { [compVars.spinnerSize]: '20px' },
    sm: { [compVars.spinnerSize]: '30px' },
    md: { [compVars.spinnerSize]: '40px' },
    lg: { [compVars.spinnerSize]: '60px' },
    xl: { [compVars.spinnerSize]: '80px' },
  },

  _hidden: {
    [compVars.hostDisplay]: 'none',
  },
};

export default loaderRadial;
export const vars = {
  ...compVars,
  ...helperVars,
};
