/*********************************************************************
 * © Copyright IBM Corp. 2024
 *********************************************************************/
import React from 'react'
import PropTypes from 'prop-types'
import {IconsGeneralColor} from '@targetprocess/css-variables'

const scopedAnimationName = 'loading-icon-spin'
const inlineStyle = `@keyframes ${scopedAnimationName} {from {transform: rotate(0deg)} to {transform: rotate(360deg)}}`

export class LoadingIcon extends React.Component<{color?: string}> {
  static category = 'Info'
  static propTypes = {
    color: PropTypes.string
  }

  componentDidMount() {
    const existingStyleTag = document.querySelector(`#${scopedAnimationName}`)
    if (existingStyleTag) {
      return
    }

    const styleTag = document.createElement('style')
    styleTag.setAttribute('id', scopedAnimationName)
    styleTag.type = 'text/css'
    styleTag.appendChild(document.createTextNode(inlineStyle))

    document.head.appendChild(styleTag)
  }

  render() {
    const {color = IconsGeneralColor} = this.props

    return (
      <svg
        width="16px"
        height="16px"
        viewBox="0 0 16 16"
        version="1.1"
        style={{
          animation: `${scopedAnimationName} 0.8s steps(12, end) infinite`,
          display: 'block'
        }}
      >
        <g stroke="none" strokeWidth="1" fillRule="evenodd" fill={color}>
          <path
            d="M7.5,0 C7.77614237,0 8,0.229644775 8,0.501464665 L8,2.99853534 C8,3.27548662 7.76806641,3.5 7.5,3.5 L7.5,3.5 C7.22385763,3.5 7,3.27035522 7,2.99853534 L7,0.501464665 C7,0.224513378 7.23193359,0 7.5,0 L7.5,0 L7.5,0 Z"
            opacity="0.200000003"
          />
          <path d="M0,8.5 C0,8.22385763 0.229644775,8 0.501464665,8 L2.99853534,8 C3.27548662,8 3.5,8.23193359 3.5,8.5 L3.5,8.5 C3.5,8.77614237 3.27035522,9 2.99853534,9 L0.501464665,9 C0.224513378,9 0,8.76806641 0,8.5 L0,8.5 L0,8.5 Z" />
          <path
            d="M8.5,16 C8.22385763,16 8,15.7703552 8,15.4985353 L8,13.0014647 C8,12.7245134 8.23193359,12.5 8.5,12.5 L8.5,12.5 C8.77614237,12.5 9,12.7296448 9,13.0014647 L9,15.4985353 C9,15.7754866 8.76806641,16 8.5,16 L8.5,16 L8.5,16 Z"
            opacity="0.800000012"
          />
          <path
            d="M16,7.5 C16,7.77614237 15.7703552,8 15.4985353,8 L13.0014647,8 C12.7245134,8 12.5,7.76806641 12.5,7.5 L12.5,7.5 C12.5,7.22385763 12.7296448,7 13.0014647,7 L15.4985353,7 C15.7754866,7 16,7.23193359 16,7.5 L16,7.5 L16,7.5 Z"
            opacity="0.5"
          />
          <path
            d="M3.5669873,1.32179677 C3.80613361,1.18372558 4.11482239,1.27067498 4.25073233,1.50607791 L5.49926767,3.66860454 C5.63774331,3.90845139 5.54913962,4.21885248 5.3169873,4.35288568 L5.3169873,4.35288568 C5.07784099,4.49095687 4.76915221,4.40400747 4.63324226,4.16860454 L3.38470693,2.00607791 C3.24623129,1.76623106 3.33483498,1.45582997 3.5669873,1.32179677 L3.5669873,1.32179677 L3.5669873,1.32179677 L3.5669873,1.32179677 Z"
            opacity="0.100000001"
          />
          <path d="M1.32179677,12.4330127 C1.18372558,12.1938664 1.27067498,11.8851776 1.50607791,11.7492677 L3.66860454,10.5007323 C3.90845139,10.3622567 4.21885248,10.4508604 4.35288568,10.6830127 L4.35288568,10.6830127 C4.49095687,10.922159 4.40400747,11.2308478 4.16860454,11.3667577 L2.00607791,12.6152931 C1.76623106,12.7537687 1.45582997,12.665165 1.32179677,12.4330127 L1.32179677,12.4330127 L1.32179677,12.4330127 L1.32179677,12.4330127 Z" />
          <path
            d="M12.4330127,14.6782032 C12.1938664,14.8162744 11.8851776,14.729325 11.7492677,14.4939221 L10.5007323,12.3313955 C10.3622567,12.0915486 10.4508604,11.7811475 10.6830127,11.6471143 L10.6830127,11.6471143 C10.922159,11.5090431 11.2308478,11.5959925 11.3667577,11.8313955 L12.6152931,13.9939221 C12.7537687,14.2337689 12.665165,14.54417 12.4330127,14.6782032 L12.4330127,14.6782032 L12.4330127,14.6782032 L12.4330127,14.6782032 Z"
            opacity="0.699999988"
          />
          <path
            d="M14.6782032,3.5669873 C14.8162744,3.80613361 14.729325,4.11482239 14.4939221,4.25073233 L12.3313955,5.49926767 C12.0915486,5.63774331 11.7811475,5.54913962 11.6471143,5.3169873 L11.6471143,5.3169873 C11.5090431,5.07784099 11.5959925,4.76915221 11.8313955,4.63324226 L13.9939221,3.38470693 C14.2337689,3.24623129 14.54417,3.33483498 14.6782032,3.5669873 L14.6782032,3.5669873 L14.6782032,3.5669873 L14.6782032,3.5669873 Z"
            opacity="0.400000006"
          />
          <path
            d="M0.82179677,4.4330127 C0.959867957,4.19386639 1.27067498,4.11482239 1.50607791,4.25073233 L3.66860454,5.49926767 C3.90845139,5.63774331 3.98691889,5.95086038 3.85288568,6.1830127 L3.85288568,6.1830127 C3.7148145,6.42215901 3.40400747,6.50120302 3.16860454,6.36529307 L1.00607791,5.11675774 C0.766231058,4.97828209 0.687763567,4.66516502 0.82179677,4.4330127 L0.82179677,4.4330127 L0.82179677,4.4330127 L0.82179677,4.4330127 Z"
            opacity="0.100000001"
          />
          <path
            d="M4.4330127,15.1782032 C4.19386639,15.040132 4.11482239,14.729325 4.25073233,14.4939221 L5.49926767,12.3313955 C5.63774331,12.0915486 5.95086038,12.0130811 6.1830127,12.1471143 L6.1830127,12.1471143 C6.42215901,12.2851855 6.50120302,12.5959925 6.36529307,12.8313955 L5.11675774,14.9939221 C4.97828209,15.2337689 4.66516502,15.3122364 4.4330127,15.1782032 L4.4330127,15.1782032 L4.4330127,15.1782032 L4.4330127,15.1782032 Z"
            opacity="0.900000036"
          />
          <path
            d="M15.1782032,11.5669873 C15.040132,11.8061336 14.729325,11.8851776 14.4939221,11.7492677 L12.3313955,10.5007323 C12.0915486,10.3622567 12.0130811,10.0491396 12.1471143,9.8169873 L12.1471143,9.8169873 C12.2851855,9.57784099 12.5959925,9.49879698 12.8313955,9.63470693 L14.9939221,10.8832423 C15.2337689,11.0217179 15.3122364,11.334835 15.1782032,11.5669873 L15.1782032,11.5669873 L15.1782032,11.5669873 L15.1782032,11.5669873 Z"
            opacity="0.600000024"
          />
          <path
            d="M11.5669873,0.82179677 C11.8061336,0.959867957 11.8851776,1.27067498 11.7492677,1.50607791 L10.5007323,3.66860454 C10.3622567,3.90845139 10.0491396,3.98691889 9.8169873,3.85288568 L9.8169873,3.85288568 C9.57784099,3.7148145 9.49879698,3.40400747 9.63470693,3.16860454 L10.8832423,1.00607791 C11.0217179,0.766231058 11.334835,0.687763567 11.5669873,0.82179677 L11.5669873,0.82179677 L11.5669873,0.82179677 L11.5669873,0.82179677 Z"
            opacity="0.300000012"
          />
        </g>
      </svg>
    )
  }
}