import { forwardRef, Ref, useId } from 'react';
import { RtLoaderProps } from './rt-loader.types';
import { RtBaseProps, useRtBaseProps } from '@dpa/react-hoc';
import cn from 'classnames';
import styles from './rt-loader.module.css';
import { RtFrame } from '@dpa/react-frame-intro';

export const RtLoader = forwardRef(function RtLoader(
  props: RtLoaderProps & RtBaseProps<HTMLDivElement>,
  ref: Ref<HTMLDivElement>
) {
  const { size = 'md', specification = 'main' } = props;
  const id = useId();
  const baseProps = useRtBaseProps(props, '0.2.2');

  return (
    <RtFrame
      isFontSizeProvider
      ref={ref}
      className={cn(
        styles['rt-loader'],
        styles[`rt-loader--${size}`],
        styles[`rt-loader--color-${specification}`]
      )}
      {...baseProps}
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        preserveAspectRatio="xMidYMid meet"
        width="16"
        height="16"
        viewBox="0 0 16 16"
      >
        <defs>
          <animateTransform
            repeatCount="indefinite"
            dur="1s"
            begin="0s"
            href={`#dot-3-${id}`}
            attributeName="transform"
            type="translate"
            values="0,0; 0,0; 0,-4.5;0,0.5;0,0"
            keyTimes="0;0.33;0.66;0.9;1"
            keySplines="0.4 0.4 0.3 0.3;0.4 0 0.3 1;0.4 0 0.3 1;0.4 0 0.3 1"
            calcMode="spline"
          />

          <animate
            repeatCount="indefinite"
            dur="1s"
            begin="0s"
            href={`#dot-3-${id}`}
            attributeName="opacity"
            from="0.48"
            to="0.48"
            keyTimes="0;0.33;0.66;0.9;1"
            values="0.48;0.48;1;0.48;0.48"
            keySplines="0.4 0 0.3 1;0.4 0 0.3 1;0.4 0 0.3 1;0 0 0 0"
            calcMode="spline"
          />
          <animateTransform
            repeatCount="indefinite"
            dur="1s"
            begin="0s"
            href={`#dot-2-${id}`}
            attributeName="transform"
            type="translate"
            from="0"
            to="0"
            keyTimes="0;0.33;0.56;0.66;1"
            values="0,0;0,-4.5;0,0.5;0,0;0,0"
            keySplines="0.4 0 0.3 1;0.4 0 0.3 1;0.4 0 0.3 1;0.4 0.4 0.3 0.3"
            calcMode="spline"
          />
          <animate
            repeatCount="indefinite"
            dur="1s"
            begin="0s"
            href={`#dot-2-${id}`}
            attributeName="opacity"
            from="0.48"
            to="0.48"
            keyTimes="0;0.33;0.56;1"
            values="0.48;1;0.48;0.48"
            keySplines="0.4 0 0.3 1;0.4 0 0.3 1;0 0 0 0"
            calcMode="spline"
          />
          <animateTransform
            repeatCount="indefinite"
            dur="1s"
            begin="0s"
            href={`#dot-1-${id}`}
            attributeName="transform"
            type="translate"
            from="0"
            to="0"
            keyTimes="0;0.23;0.33;0.66;1"
            values="0,0;0,5;0,4.5;0,4.5;0,0"
            keySplines="0.4 0 0.3 1;0.4 0 0.3 1;0.4 0.4 0.3 0.3;0.4 0 0.3 1"
            calcMode="spline"
          />
          <animate
            repeatCount="indefinite"
            dur="1s"
            begin="0s"
            href={`#dot-1-${id}`}
            attributeName="opacity"
            from="1"
            to="1"
            keyTimes="0;0.23;0.66;1"
            values="1;0.48;0.48;1"
            keySplines="0.4 0 0.3 1;0.4 0 0.3 1;0.4 0 0.3 1"
            calcMode="spline"
          />
        </defs>

        <g>
          <path
            id={`dot-3-${id}`}
            fill="currentColor"
            opacity="0.48"
            d="M16 8C16 8.82843 15.3284 9.5 14.5 9.5C13.6716 9.5 13 8.82843 13 8C13 7.17157 13.6716 6.5 14.5 6.5C15.3284 6.5 16 7.17157 16 8Z"
          />
          <path
            id={`dot-2-${id}`}
            fill="currentColor"
            opacity="0.48"
            d="M9.5 8C9.5 8.82843 8.82843 9.5 8 9.5C7.17157 9.5 6.5 8.82843 6.5 8C6.5 7.17157 7.17157 6.5 8 6.5C8.82843 6.5 9.5 7.17157 9.5 8Z"
          />
          <path
            id={`dot-1-${id}`}
            fill="currentColor"
            opacity="1"
            d="M3 3.5C3 4.32843 2.32843 5 1.5 5C0.671573 5 0 4.32843 0 3.5C0 2.67157 0.671573 2 1.5 2C2.32843 2 3 2.67157 3 3.5Z"
          />
        </g>
      </svg>
    </RtFrame>
  );
});

RtLoader.displayName = 'RtLoader';