import React, { useEffect } from 'react';

import Cursor from '../components/Cursor';
import useCursorPosition from '../hooks/useCursorPosition';

import useStore from '../store';

const InsertCursor = () => {
  const [{ toolState }] = useStore();
  const [cursorPosition, setRef] = useCursorPosition(25);

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

    if (toolState && viewer) {
      setRef(viewer);
      viewer.style.cursor = 'crosshair';
    } else if (viewer) {
      setRef(null);
      viewer.style.cursor = 'auto';
    }
  }, [toolState]);

  return ['textfield', 'checkbox', 'radio'].includes(toolState) ? (
    <Cursor
      x={cursorPosition.clientX || -1000}
      y={cursorPosition.clientY || -1000}
      appearance={toolState}
    />
  ) : null;
};

export default InsertCursor;