import { keyframes } from 'glamor';
import { BaseStyleProps } from './baseStyles.interface';
import { spin } from './defaults/animations';
import { LoadingStyles } from './defaults/themes.interface';

const linear = keyframes({
  '50%': { width: '100%' },
  '100%': { width: 0, right: 0, left: 'unset' }
});

/**
 * @description - Get styles for utilities
 * @returns {FocusStyles}
 */
export const getLoadingStyles = ({ colors }: BaseStyleProps): LoadingStyles => {
  const loadingSpinner = {
    borderWidth: `4px`,
    borderStyle: 'solid',
    borderColor: colors.onPrimary,
    borderRadius: '50%',
    borderTop: `4px solid`,
    borderTopColor: colors.onPrimary_50,
    width: '10px',
    height: '10px',
    animation: `${spin} 2s linear infinite`
  };

  const linearLoader = {
    display: 'block',
    width: '130px',
    height: '4px',
    borderRadius: '30px',
    backgroundColor: colors.onPrimary_10,
    position: 'relative',

    ':before': {
      content: "''",
      position: 'absolute',
      background: colors.onPrimary,
      top: 0,
      left: 0,
      width: '0%',
      height: '100%',
      borderRadius: '30px',
      animation: `${linear} 1s ease-in-out infinite`
    }
  };
  return {
    circular: loadingSpinner,
    linear: linearLoader
  };
};