import React from 'react';
import { findNodePath, setNodes, TElement } from '@udecode/plate-common';
import { useEditorRef, useElement } from '@udecode/plate-core';

export interface THighlightBlockElement extends TElement {
  id?: string;
  category?: 'note' | 'info' | 'warning' | 'tip';
  emoji?: string;
  showEmoji?: boolean;
  bgColor?: string;
  borderColor?: string;
}

export const useHighlightState = () => {
  const editor = useEditorRef();
  const element = useElement<THighlightBlockElement>();
  const setHighlightState = React.useCallback(
    (value: Partial<THighlightBlockElement>) => {
      const path = findNodePath(editor, element);
      setNodes<THighlightBlockElement>(editor, value, { at: path });
    },
    [editor, element]
  );

  return {
    element,
    setHighlightState,
  };
};
