import React from 'react';
import { BoxDivProps, SilkeBox } from '../silke-box';
import './silke-loader.scss';
import { SilkeTextSmall } from '../silke-text';

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

export function SilkeLoader({
  message,
  randomGenerator,
  size,
  stop,
  style,
  ...rest
}: SilkeLoaderProps) {
  return (
    <SilkeBox column align="center" {...rest}>
      <SilkeBox size={size}>
        <LoaderSVG stop={stop} style={style} />
      </SilkeBox>
      {message && <SilkeTextSmall>{message}</SilkeTextSmall>}
      {randomGenerator && <SilkeTextSmall>{randomGenerator()}</SilkeTextSmall>}
    </SilkeBox>
  );
}

export function LoaderSVG({ stop, style }: { stop?: boolean; style?: React.CSSProperties }) {
  // These are not needed for x-mas style uncomment after December
  let cl = 'loader';
  if (stop) cl += ' stop';
  return (
    <svg style={style} className={cl} viewBox="600 800 1900 1600">
      <path
        className="upSmallV"
        d="M784 1054l136 379c1 1 5 2 68 2s67-1 68-2l137-379-51-1h-51l-39 113c-41 116-41 116-61 192-1 5-4 6-5 3l-11-41c-10-37-12-44-50-153l-40-114h-51l-50 1z"
      />
      <path className="upSmallE" d="M860 1244v191h301v-79H951v-82h189v-79H951v-64h203v-79H860z" />
      <path
        className="bigV"
        d="M1382 1060l173 461 171 455 1 3h158l173-461 174-463 1-2h-148l-3 7-112 295-108 286-26 99-26 100h-4l-4-1-26-99-25-98-112-295-112-294h-148z"
      />
      <path className="bigE" d="M2139 1053h-687v926h708v-123h-570v-293h515v-125h-515v-260h549z" />
      <path
        className="downSmallV"
        d="M806 1596l136 379c1 1 5 2 68 2s67-1 68-2l137-379-51-1h-51l-39 113c-41 116-41 116-61 192-1 5-4 6-5 3l-11-41c-10-37-12-44-50-153l-40-114h-51l-50 1z"
      />
      <path className="downSmallE" d="M860 1787v192h301v-79H951v-82h189v-79H951v-64h203v-79H860z" />
    </svg>
  );
}