import { observer } from 'mobx-react';
import { useApphouse } from '../../context/useApphouse';
import { getShadesOfColor } from '../../utils/color/getShades';
import React from 'react';

export interface LoaderTypingProps {
  /**
   * The color of the loader
   * @default onPrimary
   * */
  color?: string;
  /**
   * The size of the loader
   * @default 100
   */
  size?: number;
  /**
   * The id of the loader
   */
  id: string;
  /**
   * The radius of the loader
   * @default 10
   */
  radius?: number;
}
export const LoaderTyping: React.FC<LoaderTypingProps> = observer(
  (props: LoaderTypingProps) => {
    const { color: Color, size: _size = 200, id } = props;
    const { theme } = useApphouse();
    const color = Color || theme.colors.onPrimary;
    const dim = _size;
    const dimensions = `${dim}px`;
    const viewBox = `0 0 ${dim} ${dim}`;
    const r = _size / 10;
    const hs = dim / 2;
    const qs = dim / 4;
    const hqs = hs + qs;
    const fiveShades = getShadesOfColor(color);

    return (
      <svg
        id={id}
        xmlns="http://www.w3.org/2000/svg"
        style={{
          margin: 'auto',
          display: 'block',
          shapeRendering: 'auto',
          width: dim - hqs,
          height: hs - hs / 1.8
        }}
        width={dimensions}
        height={dimensions}
        viewBox={viewBox}
        preserveAspectRatio="xMidYMid"
      >
        <circle cx={hqs} cy={hs} r={r} fill={color}>
          <animate
            attributeName="r"
            repeatCount="indefinite"
            dur="0.25s"
            calcMode="spline"
            keyTimes="0;1"
            values={`${r};0`}
            keySplines="0 0.5 0.5 1"
            begin="0s"
          ></animate>
          <animate
            attributeName="fill"
            repeatCount="indefinite"
            dur="1s"
            calcMode="discrete"
            keyTimes="0;0.25;0.5;0.75;1"
            values={fiveShades.join(';')}
            begin="0s"
          ></animate>
        </circle>
        <circle cx={qs} cy={hs} r={r} fill={color}>
          <animate
            attributeName="r"
            repeatCount="indefinite"
            dur="1s"
            calcMode="spline"
            keyTimes="0;0.25;0.5;0.75;1"
            values={`0;0;${r};${r};${r}`}
            keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
            begin="0s"
          ></animate>
          <animate
            attributeName="cx"
            repeatCount="indefinite"
            dur="1s"
            calcMode="spline"
            keyTimes="0;0.25;0.5;0.75;1"
            values={`${qs};${qs};${qs};${hs};${hqs}`}
            keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
            begin="0s"
          ></animate>
        </circle>
        <circle cx={hs} cy={hs} r={r} fill={color}>
          <animate
            attributeName="r"
            repeatCount="indefinite"
            dur="1s"
            calcMode="spline"
            keyTimes="0;0.25;0.5;0.75;1"
            values={`0;0;${r};${r};${r}`}
            keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
            begin="-0.25s"
          ></animate>
          <animate
            attributeName="cx"
            repeatCount="indefinite"
            dur="1s"
            calcMode="spline"
            keyTimes="0;0.25;0.5;0.75;1"
            values={`${qs};${qs};${qs};${hs};${hqs}`}
            keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
            begin="-0.25s"
          ></animate>
        </circle>
        <circle cx={hqs} cy={hs} r={r} fill={color}>
          <animate
            attributeName="r"
            repeatCount="indefinite"
            dur="1s"
            calcMode="spline"
            keyTimes="0;0.25;0.5;0.75;1"
            values={`0;0;${r};${r};${r}`}
            keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
            begin="-0.5s"
          ></animate>
          <animate
            attributeName="cx"
            repeatCount="indefinite"
            dur="1s"
            calcMode="spline"
            keyTimes="0;0.25;0.5;0.75;1"
            values={`${qs};${qs};${qs};${hs};${hqs}`}
            keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
            begin="-0.5s"
          ></animate>
        </circle>
        <circle cx={qs} cy={hs} r={r} fill={color}>
          <animate
            attributeName="r"
            repeatCount="indefinite"
            dur="1s"
            calcMode="spline"
            keyTimes="0;0.25;0.5;0.75;1"
            values={`0;0;${r};${r};${r}`}
            keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
            begin="-0.75s"
          ></animate>
          <animate
            attributeName="cx"
            repeatCount="indefinite"
            dur="1s"
            calcMode="spline"
            keyTimes="0;0.25;0.5;0.75;1"
            values={`${qs};${qs};${qs};${hs};${hqs}`}
            keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
            begin="-0.75s"
          ></animate>
        </circle>
      </svg>
    );
  }
);