// composables/useEditor.ts
import { shallowRef } from 'vue';
import type { Ref } from 'vue';
import type { Component } from 'vue';
import type ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import loadCKEditorFunction from '@/utils/ckeditorUtils';

export const useEditor = () => {
  const editorConstructor: Ref<typeof ClassicEditor | null> = shallowRef(null);
  const ckeditorComponent: Ref<Component | null> = shallowRef(null);
  const loadEditor = async () => {
    try {
      const ckInstances = await loadCKEditorFunction();
      editorConstructor.value = ckInstances.editor; // Assign the constructor
      ckeditorComponent.value = ckInstances.ckeditor; // Assign the Vue component
      console.log(
        'Editor constructor and component loaded:',
        !!editorConstructor.value,
        !!ckeditorComponent.value
      );
    } catch (err) {
      console.error('CKEditor load failed:', err);
      // Reset refs on failure
      editorConstructor.value = null;
      ckeditorComponent.value = null;
    }
  };
  return {
    editor: editorConstructor,
    ckeditor: ckeditorComponent,
    loadEditor,
  };
};
