import { EditorState } from 'draft-js';
import { useEffect, useState } from 'react';
import getSelectedBlockElement from '../utils/getSelectedBlockElement.js';

interface Rect {
  top: number;
  left: number;
  width: number;
  height: number;
}

interface UseBlockToolbarPropsRes {
  trigger: Rect;
  visible: boolean;
}

/**
 * Updates the visibility of the block toolbar.
 */
const useBlockToolbarProps = (
  value: EditorState,
  show: boolean
): UseBlockToolbarPropsRes => {
  const [trigger, setTrigger] = useState({
    top: 0,
    left: 0,
    width: 0,
    height: 0,
  });
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (!show || !value) return;

    const selectedBlockElement = getSelectedBlockElement();
    if (!selectedBlockElement) {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setVisible(false);
      return;
    }

    const selectionState = value.getSelection();
    const currentBlockKey = selectionState.getStartKey();
    const contentState = value.getCurrentContent();
    const currentBlock = contentState.getBlockForKey(currentBlockKey);
    const lineNumber = contentState
      .getBlockMap()
      .keySeq()
      .findIndex((k) => k === currentBlockKey);

    if (
      currentBlock.getType() !== 'unstyled' ||
      currentBlock.getLength() > 0 ||
      lineNumber === 0
    ) {
      setVisible(false);
      return;
    }

    const { top, left, height } = selectedBlockElement.getBoundingClientRect();
    setTrigger({
      top,
      left,
      width: 0,
      height,
    });
    setVisible(true);
  }, [show, value]);

  return { trigger, visible };
};

export default useBlockToolbarProps;