import { useEffect, useState } from 'react';
const useInstructionText = function useInstructionText(instructionOverlay, clearInstructionOverlay) {
  // set in state so that the text doesn't disappear
  // before the css transition completes
  const [text, setText] = useState(null);
  useEffect(() => {
    if (instructionOverlay) {
      const isMac = window.navigator.platform.indexOf('Mac') === 0;
      const metaKey = isMac ? '⌘' : '⊞';
      if (instructionOverlay === 'desktop') {
        setText(`Press ${metaKey} to zoom the map`);
      } else {
        setText('Use two fingers to move the map');
      }
    }
    const timer = instructionOverlay && setTimeout(() => {
      clearInstructionOverlay();
    }, 2000);
    return () => {
      if (timer) {
        clearTimeout(timer);
      }
    };
  }, [instructionOverlay, clearInstructionOverlay]);
  return text;
};
export default useInstructionText;