import * as React from "react";
import "./style.css";

export enum ESpinner {
  Plane = "Plane",
  Chase = "Chase",
  Bounce = "Bounce",
  Wave = "Wave",
  Pulse = "Pulse",
  Flow = "Flow",
  Swing = "Swing",
  Circle = "Circle",
  CircleFade = "CircleFade",
  Grid = "Grid",
  Fold = "Fold",
  Wander = "Wander",
}

export function Spinner({
  spinner,
  delay = 0,
  ...rest
}: {
  spinner: ESpinner;
  delay: number;
} & React.HTMLAttributes<HTMLDivElement>) {
  const [show, setShow] = React.useState(() => (delay === 0 ? true : false));
  React.useEffect(() => {
    const timeout = setTimeout(() => setShow(true), delay);
    return () => clearTimeout(timeout);
  }, [delay]);
  return (
    <div data-component="Spinner$Brevity" {...rest}>
      {show ? (
        <div className="sk-fade-in">
          <InnerSpinner spinner={spinner} />
        </div>
      ) : (
        <div className="sk-none" />
      )}
    </div>
  );
}

function InnerSpinner({
  spinner = ESpinner.CircleFade,
}: {
  spinner: ESpinner;
}) {
  switch (spinner) {
    case ESpinner.Plane:
      return <div className="sk-plane"></div>;
    case ESpinner.Chase:
      return (
        <div className="sk-chase">
          <div className="sk-chase-dot"></div>
          <div className="sk-chase-dot"></div>
          <div className="sk-chase-dot"></div>
          <div className="sk-chase-dot"></div>
          <div className="sk-chase-dot"></div>
          <div className="sk-chase-dot"></div>
        </div>
      );
    case ESpinner.Bounce:
      return (
        <div className="sk-bounce">
          <div className="sk-bounce-dot"></div>
          <div className="sk-bounce-dot"></div>
        </div>
      );
    case ESpinner.Wave:
      return (
        <div className="sk-wave">
          <div className="sk-wave-rect"></div>
          <div className="sk-wave-rect"></div>
          <div className="sk-wave-rect"></div>
          <div className="sk-wave-rect"></div>
          <div className="sk-wave-rect"></div>
        </div>
      );
    case ESpinner.Pulse:
      return <div className="sk-pulse"></div>;
    case ESpinner.Flow:
      return (
        <div className="sk-flow">
          <div className="sk-flow-dot"></div>
          <div className="sk-flow-dot"></div>
        </div>
      );
    case ESpinner.Swing:
      return (
        <div className="sk-swing">
          <div className="sk-swing-dot"></div>
          <div className="sk-swing-dot"></div>
        </div>
      );
    case ESpinner.Circle:
      return (
        <div className="sk-circle">
          <div className="sk-circle-dot"></div>
          <div className="sk-circle-dot"></div>
          <div className="sk-circle-dot"></div>
          <div className="sk-circle-dot"></div>
          <div className="sk-circle-dot"></div>
          <div className="sk-circle-dot"></div>
          <div className="sk-circle-dot"></div>
          <div className="sk-circle-dot"></div>
          <div className="sk-circle-dot"></div>
          <div className="sk-circle-dot"></div>
          <div className="sk-circle-dot"></div>
          <div className="sk-circle-dot"></div>
        </div>
      );
    case ESpinner.CircleFade:
      return (
        <div className="sk-circle-fade">
          <div className="sk-circle-fade-circle"></div>
          <div className="sk-circle-fade-circle"></div>
          <div className="sk-circle-fade-circle"></div>
          <div className="sk-circle-fade-circle"></div>
          <div className="sk-circle-fade-circle"></div>
          <div className="sk-circle-fade-circle"></div>
          <div className="sk-circle-fade-circle"></div>
          <div className="sk-circle-fade-circle"></div>
          <div className="sk-circle-fade-circle"></div>
          <div className="sk-circle-fade-circle"></div>
          <div className="sk-circle-fade-circle"></div>
          <div className="sk-circle-fade-circle"></div>
        </div>
      );
    case ESpinner.Grid:
      return (
        <div className="sk-grid">
          <div className="sk-grid-cube"></div>
          <div className="sk-grid-cube"></div>
          <div className="sk-grid-cube"></div>
          <div className="sk-grid-cube"></div>
          <div className="sk-grid-cube"></div>
          <div className="sk-grid-cube"></div>
          <div className="sk-grid-cube"></div>
          <div className="sk-grid-cube"></div>
          <div className="sk-grid-cube"></div>
        </div>
      );
    case ESpinner.Fold:
      return (
        <div className="sk-fold">
          <div className="sk-fold-cube"></div>
          <div className="sk-fold-cube"></div>
          <div className="sk-fold-cube"></div>
          <div className="sk-fold-cube"></div>
        </div>
      );
    case ESpinner.Wander:
      return (
        <div className="sk-wander">
          <div className="sk-wander-cube"></div>
          <div className="sk-wander-cube"></div>
          <div className="sk-wander-cube"></div>
        </div>
      );
    default:
      return null;
  }
}