import React from 'react';
import { SilkeColor } from '../../silke-theme-provider';
import { BoxDivProps, SilkeBox } from '../silke-box';
import { LoaderSVG } from './silke-loader';
import './silke-loader.scss';

interface SilkeLoaderProps extends BoxDivProps {
  loading: boolean;
  message?: string;
  children?: React.ReactNode;
  randomGenerator?: () => string;
  style?: React.CSSProperties;
  bg?: SilkeColor;
  /**
   * Stops the loader animation on the vev logo
   */
  stop?: boolean;
}

export function SilkeLoaderOverlay({
  message,
  loading,
  size,
  stop,
  style,
  children,
  bg,
  randomGenerator,
  ...rest
}: SilkeLoaderProps) {
  return (
    <>
      {loading && (
        <>
          <SilkeBox column align="center" style={{ zIndex: 999 }} {...rest}>
            <LoaderSVG stop={stop} style={style} />
            {message && <div className="text-fade">{message}</div>}
            {randomGenerator && <div className="text-fade">{randomGenerator()}</div>}
          </SilkeBox>
          <BgOverlay bg={bg} />
        </>
      )}
      {children}
    </>
  );
}

const BgOverlay = ({ bg = 'neutral-0' }: { bg?: SilkeColor }) => {
  return (
    <SilkeBox
      bg={bg}
      style={{
        position: 'absolute',
        width: '100%',
        height: '100%',
        top: 0,
        left: 0,
        opacity: 'var(--opacity-level-semiopaque)',
        zIndex: 998,
      }}
    />
  );
};