import { reactive, nextTick } from 'vue';
import { tasks, categories } from '@/utils/shared';

export function useEditorBlock(selector, editor) {
  const block = reactive({
    id: '',
    data: {},
    details: {},
    category: {},
    retrieved: false,
    containerEl: null,
  });

  nextTick(() => {
    const rootElement = editor.rootElement || document;
    const element = rootElement.querySelector(selector);

    if (block.id || !element) return;

    block.containerEl = element.parentElement.parentElement;
    block.id = block.containerEl.id.replace('node-', '');

    if (block.id) {
      const { name, data } = editor.getNodeFromId(block.id);
      const details = tasks[name];

      block.details = { id: name, ...details };
      block.data = data || details.data;
      block.category = categories[details.category];
    }

    setTimeout(() => {
      editor.updateConnectionNodes(`node-${block.id}`);
    }, 200);
  });

  block.retrieved = true;

  return block;
}