Spinner

import type { VariantProps } from 'cva';
import { useEffect, useState } from 'react';

import { cva } from '@/lib/utils/classnames';

type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
type SpinnerVariant = 'ring' | 'dots' | 'bars' | 'frames';

interface BaseSpinnerProps extends React.ComponentPropsWithRef<'div'> {
  size?: SpinnerSize;
}

const ringStyle = cva({
  base: [
    'relative animate-spin',
    'before:absolute before:top-0 before:left-0 before:block before:size-full before:rounded-full before:border-current before:opacity-40',
    'after:top-0 after:left-0 after:block after:size-full after:rounded-full after:border-transparent after:border-t-current after:border-r-current',
  ],
  variants: {
    size: {
      xs: 'size-2 before:border after:border',
      sm: 'size-3 before:border after:border',
      md: 'size-4 before:border-2 after:border-2',
      lg: 'size-5 before:border-2 after:border-2',
    } satisfies Record<SpinnerSize, string>,
  },
});

const SpinnerRing = ({
  ref,
  className,
  size = 'md',
  ...props
}: BaseSpinnerProps) => {
  return (
    <div
      ref={ref}
      role="progressbar"
      aria-label="loading"
      className={ringStyle({ size, className })}
      {...props}
    />
  );
};

const dotsContainerStyle = cva({
  base: 'inline-flex items-center',
  variants: {
    size: {
      xs: 'gap-0.5',
      sm: 'gap-0.5',
      md: 'gap-1',
      lg: 'gap-1',
    } satisfies Record<SpinnerSize, string>,
  },
});

const dotStyle = cva({
  base: 'animate-spinner-dot rounded-full bg-current',
  variants: {
    size: {
      xs: 'size-px',
      sm: 'size-0.5',
      md: 'size-0.75',
      lg: 'size-1',
    } satisfies Record<SpinnerSize, string>,
  },
});

const SpinnerDots = ({
  ref,
  className,
  size = 'md',
  ...props
}: BaseSpinnerProps) => {
  return (
    <div
      ref={ref}
      role="progressbar"
      aria-label="loading"
      className={dotsContainerStyle({ size, className })}
      {...props}
    >
      <span className={dotStyle({ size })} />
      <span
        className={dotStyle({ size })}
        style={{ animationDelay: '160ms' }}
      />
      <span
        className={dotStyle({ size })}
        style={{ animationDelay: '320ms' }}
      />
    </div>
  );
};

const barsContainerStyle = cva({
  base: 'inline-flex items-center',
  variants: {
    size: {
      xs: 'h-2 gap-0.5',
      sm: 'h-3 gap-0.5',
      md: 'h-4 gap-1',
      lg: 'h-5 gap-1',
    } satisfies Record<SpinnerSize, string>,
  },
});

const barStyle = cva({
  base: 'h-full origin-center animate-spinner-bar bg-current',
  variants: {
    size: {
      xs: 'w-px',
      sm: 'w-0.25',
      md: 'w-0.5',
      lg: 'w-0.75',
    } satisfies Record<SpinnerSize, string>,
  },
});

const SpinnerBars = ({
  ref,
  className,
  size = 'md',
  ...props
}: BaseSpinnerProps) => {
  return (
    <div
      ref={ref}
      role="progressbar"
      aria-label="loading"
      className={barsContainerStyle({ size, className })}
      {...props}
    >
      <span className={barStyle({ size })} />
      <span
        className={barStyle({ size })}
        style={{ animationDelay: '120ms' }}
      />
      <span
        className={barStyle({ size })}
        style={{ animationDelay: '240ms' }}
      />
    </div>
  );
};

export const SPINNER_FRAMES = {
  braille: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'],
  bounce: ['⠁', '⠂', '⠄', '⠂'],
  moon: ['🌑', '🌒', '🌓', '🌔', '🌕', '🌖', '🌗', '🌘'],
  sparkle: ['✶', '✸', '✹', '✺', '✹', '✷'],
  dots: ['●', '◉', '◎', '○', '◌', '◦', '∘', '·'],
  shades: ['█', '▓', '▒', '░', ' ', '░', '▒', '▓'],
  pipe: ['|', '/', '-', '\\'],
} as const satisfies Record<string, readonly string[]>;

const framesStyle = cva({
  base: 'inline-flex items-center justify-center font-mono tabular-nums leading-none',
  variants: {
    size: {
      xs: 'size-2.5 text-2xs',
      sm: 'size-3 text-xs',
      md: 'size-4 text-base',
      lg: 'size-5 text-xl',
    } satisfies Record<SpinnerSize, string>,
  },
});

interface SpinnerFramesProps extends BaseSpinnerProps {
  /** Frames to cycle through. Defaults to `SPINNER_FRAMES.braille`. */
  frames?: readonly string[];
  /** Milliseconds between frames. */
  interval?: number;
}

const SpinnerFrames = ({
  ref,
  className,
  size = 'md',
  frames = SPINNER_FRAMES.braille,
  interval = 80,
  ...props
}: SpinnerFramesProps) => {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const id = window.setInterval(() => {
      setIndex((i) => (i + 1) % frames.length);
    }, interval);

    return () => window.clearInterval(id);
  }, [frames.length, interval]);

  return (
    <div
      ref={ref}
      role="progressbar"
      aria-label="loading"
      className={framesStyle({ size, className })}
      {...props}
    >
      <span aria-hidden="true">{frames[index]}</span>
    </div>
  );
};

export interface SpinnerProps
  extends BaseSpinnerProps,
    VariantProps<typeof ringStyle> {
  variant?: SpinnerVariant;
  /** Frames to cycle through when `variant="frames"`. */
  frames?: readonly string[];
  /** Milliseconds between frames when `variant="frames"`. */
  interval?: number;
}

const Spinner = ({
  variant = 'ring',
  frames,
  interval,
  ...props
}: SpinnerProps) => {
  if (variant === 'dots') return <SpinnerDots {...props} />;
  if (variant === 'bars') return <SpinnerBars {...props} />;
  if (variant === 'frames')
    return <SpinnerFrames frames={frames} interval={interval} {...props} />;
  return <SpinnerRing {...props} />;
};

export { Spinner };