import { useEffect, useState } from 'react';
import Mousetrap from 'mousetrap';

const useShift = () => {
  const [shift, setShift] = useState(false);

  useEffect(() => {
    const shiftDown = (e) => {
      e.preventDefault();
      setShift(true);
    };

    const shiftUp = (e) => {
      e.preventDefault();
      setShift(false);
    };

    Mousetrap.bind('shift', shiftDown, 'keydown');
    Mousetrap.bind('shift', shiftUp, 'keyup');
    return () => {
      Mousetrap.unbind('shift', shiftDown);
      Mousetrap.unbind('shift', shiftUp);
    };
  }, []);

  return shift;
};

export default useShift;
