// @flow strict

import * as React from 'react';

import * as COLORS from '../../styles/variables/_color';
import classify from '../../utils/classify';

import css from './CircularLoader.module.css';


export type CircularLoaderProps = {
  size?: 'large' | 'medium' | 'small',
  className?: string,
  ariaLabel?: string,
  // TODO: update it to permissible colors
  colorToken?: $Keys<typeof COLORS>,
};

export const CircularLoader: React$AbstractComponent<
  CircularLoaderProps,
  HTMLDivElement,
> = React.forwardRef<CircularLoaderProps, HTMLDivElement>(
  (
    {
      size = 'medium',
      className,
      colorToken = 'colorTextClickable',
      ariaLabel = 'Loading',
    }: CircularLoaderProps,
    ref,
  ): React.Node => (
    <div
      className={classify(
        css.container,
        {
          [css.mediumContainer]: size === 'medium',
          [css.smallContainer]: size === 'small',
        },
        className,
      )}
      ref={ref}
      aria-label={ariaLabel}
      role="alert"
      aria-busy="true"
    >
      <div className={css.spinLoader} aria-hidden="true">
        <div
          className={css.outerCircle}
          style={{'--color': COLORS[colorToken]}}
        ></div>
        <div
          className={css.ellipse}
          style={{'--color': COLORS[colorToken]}}
        ></div>
      </div>
    </div>
  ),
);