const VolumeKnobComponent = () => {
  const [volumeLevel, setVolumeLevel] = React.useState(70);
    
  const interactionAreaRef = React.useRef();
  const scrollWheelRef = React.useRef();  
  const scrollWheelWrapperRef = React.useRef();
  
  let width = 100;
  let height = 100;
  let touchPosX = 0;
  let touchPosY = height / 2;
  let currentAngle = 0;
  
  const setDefaultVolumeLevel = () => {
    scrollWheelRef.current.style.transform = 'rotate('+ 45 +'deg)';
  }
  
  const setEventListeners = () => {
    interactionAreaRef.current.addEventListener("touchmove", calculateAngle(event));
    interactionAreaRef.current.addEventListener("touchstart", setTouchPos(event));

    interactionAreaRef.current.addEventListener("mousedown", setTouchPos(event));
    interactionAreaRef.current.addEventListener("mousemove", calculateAngle(event));
  }
    
  const setTouchPos = (event) => {
    touchPosX = event.layerX - (width / 2);
    touchPosY = (height / 2) - event.layerY;
  }

  const calculateAngle = (event) => {
    let adjustedLayerX = event.layerX - (width / 2);
    let adjustedLayerY = (height / 2) - event.layerY;
  
    let startAngle = Math.atan2(touchPosY, touchPosX) * 180 / Math.PI - 90;
    let deltaAngle = Math.atan2(adjustedLayerY, adjustedLayerX) * 180 / Math.PI - 90;
    
    currentAngle += (startAngle - deltaAngle);
  
    switch(true) {
      case currentAngle > 150 && currentAngle <= 210:
        setVolumeLevel(0);
        break;
      case currentAngle > 210 && currentAngle <= 240:
        setVolumeLevel(10);
        break;
      case (currentAngle > 240 && currentAngle <= 269) || currentAngle === -90:
        setVolumeLevel(20);
        break;
      case currentAngle > -90 && currentAngle <= -60:
        setVolumeLevel(30);
        break;
      case currentAngle > -60 && currentAngle <= -30:
        setVolumeLevel(40);
        break;
      case currentAngle > -30 && currentAngle < 0:
        setVolumeLevel(50);
        break;
      case currentAngle > 0 && currentAngle <= 30:
        setVolumeLevel(60);
        break;
      case currentAngle > 30 && currentAngle <= 60:
        setVolumeLevel(70);
        break;
      case currentAngle > 60 && currentAngle <= 90:
        setVolumeLevel(80);
        break;
      case currentAngle > 90 && currentAngle <= 120:
        setVolumeLevel(90);
        break;
      case currentAngle > 120 && currentAngle <= 150:
        setVolumeLevel(100);
        break;
    }
  
    scrollWheelRef.current.style.transform = 'rotate('+ currentAngle +'deg)';
    
    if (!volumeLevel) {
      scrollWheelRef.current.style.background = "rgba(0, 0, 0, 0.2)";
    }
    else if (volumeLevel === 90) {
      scrollWheelRef.current.style.background = "rgba(255,255,0, 1.0)";
    }
    else if (volumeLevel === 100) {
      scrollWheelRef.current.style.background = "rgba(360, 0, 0, 1.0)";
    }
    else {
      scrollWheelRef.current.style.background = "rgba(0, 191, 255, " + volumeLevel * 0.0125 + ")";
    }
    
    touchPosX = adjustedLayerX;
    touchPosY = adjustedLayerY;
  }
  
  React.useEffect(() => {
    setDefaultVolumeLevel();
    
    //This prevents the iOS Safari bounce.
    scrollWheelWrapperRef.current.addEventListener('touchmove', (event) => event.preventDefault());    
  });
  
  return(
    <div>
      <div ref={scrollWheelWrapperRef} id="scroll-wheel-wrapper">
        <div ref={scrollWheelRef} id="scroll-wheel">
          <div id="thumb">
          </div>
        </div>
          
        <div ref={interactionAreaRef} id="interaction-area" onMouseMove={() => setEventListeners()} onTouchMove={() => setEventListeners()}>
        </div>
      </div>
        
      <div id="volume-level">
        {volumeLevel}
      </div>
        
      <div>
        <p>
          I turned a project called <a href="https://codepen.io/marcwiethe/pen/RwNwmyL">VanillaJS: Volume Knob / Circular Slider</a> by
          <a href="https://codepen.io/marcwiethe">Marc Wiethe</a> into a React component.  Thanks a lot for your project <a href="https://codepen.io/marcwiethe">Marc Wiethe</a>, it helped me an enormous amount with mine.
        </p>
          
        <p>
            If you want to use this as a volume knob on iOS and iPadOS devices, you will have to use the Web Audio API so that you can control the gain on the volume.  I did a <a href="https://codepen.io/TazExprez/pen/NWGMdRz?editors=1010">Web Audio API React Component</a> that you can use for this purpose.
        </p>
          
        <p>
            There is currently an iOS 13 and iPadOS 13 bug that causes issues and you can read about it at the <a href="https://bugs.webkit.org/show_bug.cgi?id=203435">WebKit Bugzilla</a> website.  The createMediaElementSource() method of the AudioContext Interface is currently not working properly in the iOS 13 and the iPadOS 13 versions of Safari.  Once the issue is resolved, the <a href="https://codepen.io/TazExprez/pen/NWGMdRz?editors=1010">Web Audio API React Component</a> should be working properly in iOS 13 and iPad OS 13. I tested an iOS 12 device and found no issues.
        </p>
      </div>
    </div>
  );
}

ReactDOM.render(<VolumeKnobComponent/>, document.getElementById("react-volume-knob"));