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

export interface TStatusElement extends TElement {
  category?: 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'time';
  value?: string;
}

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

  return {
    element,
    setStatusValue,
  };
};
