import React, { useEffect, useState } from 'react';

import CursorImage from '../components/Cursor';

import useStore from '../store';

const InsertCursor = () => {
  const [{ toolState }] = useStore();
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const getMousePosition = (event: any) => {
    setPosition({
      x: event.clientX,
      y: event.clientY,
    });
  };

  useEffect(() => {
    const viewer = document.getElementById('pdf_viewer') as HTMLDivElement;

    if (toolState && viewer) {
      viewer.addEventListener('mousemove', getMousePosition);
      viewer.style.cursor = 'crosshair';
    } else if (viewer) {
      viewer.removeEventListener('mousemove', getMousePosition);
      viewer.style.cursor = 'auto';
    }
  }, [toolState]);

  return ['textfield', 'checkbox', 'radio'].includes(toolState) ? (
    <CursorImage x={position.x} y={position.y} appearance={toolState} />
  ) : null;
};

export default InsertCursor;