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

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

  return (
    <RtFrame
      isFontSizeProvider
      ref={ref}
      className={cn(
        styles['rt-spinner'],
        styles[`rt-spinner--${size}`],
        styles[`rt-spinner--container-width-${width}`],
        styles[`rt-spinner--container-height-${height}`],
        styles[`rt-spinner--color-${specification}`]
      )}
      {...baseProps}
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        preserveAspectRatio="xMidYMid meet"
        viewBox="0 0 24 24"
      >
        <defs>
          <animate
            repeatCount="indefinite"
            dur="1s"
            begin="0s"
            href={`#0-deg-${id}`}
            attributeName="opacity"
            from="1"
            to="1"
            keyTimes="0;0.875;1"
            values="1;0.15;1"
          />
          <animate
            repeatCount="indefinite"
            dur="1s"
            begin="0s"
            href={`#45-deg-${id}`}
            attributeName="opacity"
            from="0.87"
            to="0.87"
            keyTimes="0;0.75;0.875;1"
            values="0.87;0.15;1;0.87"
          />
          <animate
            repeatCount="indefinite"
            dur="1s"
            begin="0s"
            href={`#90-deg-${id}`}
            attributeName="opacity"
            from="0.75"
            to="0.75"
            keyTimes="0;0.625;0.75;1"
            values="0.75;0.15;1;0.75"
          />
          <animate
            repeatCount="indefinite"
            dur="1s"
            begin="0s"
            href={`#135-deg-${id}`}
            attributeName="opacity"
            from="0.63"
            to="0.63"
            keyTimes="0;0.5;0.625;1"
            values="0.63;0.15;1;0.63"
          />
          <animate
            repeatCount="indefinite"
            dur="1s"
            begin="0s"
            href={`#180-deg-${id}`}
            attributeName="opacity"
            from="0.51"
            to="0.51"
            keyTimes="0;0.375;0.5;1"
            values="0.51;0.15;1;0.51"
          />
          <animate
            repeatCount="indefinite"
            dur="1s"
            begin="0s"
            href={`#225-deg-${id}`}
            attributeName="opacity"
            from="0.39"
            to="0.39"
            keyTimes="0;0.25;0.375;1"
            values="0.39;0.15;1;0.39"
          />
          <animate
            repeatCount="indefinite"
            dur="1s"
            begin="0s"
            href={`#270-deg-${id}`}
            attributeName="opacity"
            from="0.27"
            to="0.27"
            keyTimes="0;0.125;0.25;1"
            values="0.27;0.15;1;0.27"
          />
          <animate
            repeatCount="indefinite"
            dur="1s"
            begin="0s"
            href={`#315-deg-${id}`}
            attributeName="opacity"
            from="0.15"
            to="0.15"
            keyTimes="0;0.125;1"
            values="0.15;1;0.15"
          />
        </defs>
        <g>
          <path
            id={`0-deg-${id}`}
            fill="currentColor"
            opacity="1"
            d="M 12,0C 11.12,0,10.4,0.72,10.4,1.6C 10.4,1.6,10.4,6.4,10.4,6.4C 10.4,7.28,11.12,8,12,8C 12.88,8,13.6,7.28,13.6,6.4C 13.6,6.4,13.6,1.6,13.6,1.6C 13.6,0.72,12.88,0,12,0z"
          />
          <path
            id={`45-deg-${id}`}
            fill="currentColor"
            opacity="0.87"
            d="M 3.514,3.513C 2.894,4.143,2.894,5.153,3.514,5.773C 3.514,5.773,6.914,9.173,6.914,9.173C 7.534,9.793,8.544,9.793,9.174,9.173C 9.794,8.543,9.794,7.533,9.174,6.913C 9.174,6.913,5.774,3.513,5.774,3.513C 5.154,2.893,4.144,2.893,3.514,3.513z"
          />
          <path
            id={`90-deg-${id}`}
            fill="currentColor"
            opacity="0.75"
            d="M 0,12C 0,12.88,0.72,13.6,1.6,13.6C 1.6,13.6,6.4,13.6,6.4,13.6C 7.28,13.6,8,12.88,8,12C 8,11.12,7.28,10.4,6.4,10.4C 6.4,10.4,1.6,10.4,1.6,10.4C 0.72,10.4,0,11.12,0,12z"
          />
          <path
            id={`135-deg-${id}`}
            fill="currentColor"
            opacity="0.63"
            d="M 3.514,20.487C 4.144,21.107,5.154,21.107,5.774,20.487C 5.774,20.487,9.174,17.087,9.174,17.087C 9.794,16.467,9.794,15.457,9.174,14.827C 8.544,14.207,7.534,14.207,6.914,14.827C 6.914,14.827,3.514,18.227,3.514,18.227C 2.894,18.847,2.894,19.857,3.514,20.487z"
          />
          <path
            id={`180-deg-${id}`}
            fill="currentColor"
            opacity="0.51"
            d="M 12,24C 12.88,24,13.6,23.28,13.6,22.4C 13.6,22.4,13.6,17.6,13.6,17.6C 13.6,16.72,12.88,16,12,16C 11.12,16,10.4,16.72,10.4,17.6C 10.4,17.6,10.4,22.4,10.4,22.4C 10.4,23.28,11.12,24,12,24z"
          />
          <path
            id={`225-deg-${id}`}
            fill="currentColor"
            opacity="0.39"
            d="M 20.486,20.487C 21.106,19.857,21.106,18.847,20.486,18.227C 20.486,18.227,17.086,14.827,17.086,14.827C 16.466,14.207,15.456,14.207,14.826,14.827C 14.206,15.457,14.206,16.467,14.826,17.087C 14.826,17.087,18.226,20.487,18.226,20.487C 18.846,21.107,19.856,21.107,20.486,20.487z"
          />
          <path
            id={`270-deg-${id}`}
            fill="currentColor"
            opacity="0.27"
            d="M 24,12C 24,11.12,23.28,10.4,22.4,10.4C 22.4,10.4,17.6,10.4,17.6,10.4C 16.72,10.4,16,11.12,16,12C 16,12.88,16.72,13.6,17.6,13.6C 17.6,13.6,22.4,13.6,22.4,13.6C 23.28,13.6,24,12.88,24,12z"
          />
          <path
            id={`315-deg-${id}`}
            fill="currentColor"
            opacity="0.15"
            d="M 20.486,3.513C 19.856,2.893,18.846,2.893,18.226,3.513C 18.226,3.513,14.826,6.913,14.826,6.913C 14.206,7.533,14.206,8.543,14.826,9.173C 15.456,9.793,16.466,9.793,17.086,9.173C 17.086,9.173,20.486,5.773,20.486,5.773C 21.106,5.153,21.106,4.143,20.486,3.513z"
          />
        </g>
      </svg>
    </RtFrame>
  );
});

RtSpinner.displayName = 'RtSpinner';