import { useEffect, useState } from 'react';

export type Range = {
  start: number;
  end: number;
};

const useInputSelection = (
  inputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement>
) => {
  const [selection, setSelection] = useState<Range | null>();
  useEffect(() => {
    const input = inputRef.current;
    if (input) {
      input.addEventListener('selectionchange', () => {
        const selectionStart = input.selectionStart;
        const selectionEnd = input.selectionEnd;
        if (selectionStart !== null && selectionEnd !== null) {
          setSelection({ start: selectionStart, end: selectionEnd });
        } else {
          setSelection(null);
        }
      });
    }
  }, [inputRef]);

  return selection;
};

export default useInputSelection;