import {
  ref,
  Ref,
  inject,
  reactive,
} from 'vue';
import { IInlineToolLibrary } from '../types';

export const SymInlineToolbarClients = Symbol('Schlechtenburg inline toolbar client elements');
export const SymInlineToolLibrary = Symbol('Schlechtenburg inline tool library');

export const useInline = () => {
  const clients: Ref<HTMLElement[]> = inject(SymInlineToolbarClients, ref([]));
  const tools: IInlineToolLibrary = inject(SymInlineToolLibrary, reactive({}));
  const getTool = (name: string) => tools[name];
  const getAllTools = () => Object.keys(tools).map(name => tools[name]);

  const setClients = (newClients: HTMLElement[]) => {
    clients.value = newClients;
  };

  const clientIsRegistered = (el: HTMLElement) => !!clients.value.find(cl => cl === el);

  const registerClient = (el: HTMLElement) => {
    if (clientIsRegistered(el)) {
      console.warn('Not reregistering toolbar client that is already registered:', el);
      return;
    }

    setClients([
      ...clients.value,
      el,
    ]);
  };

  const unregisterClient = (el: HTMLElement) => {
    setClients(clients.value.filter(cl => cl !== el));
  };

  return {
    tools,
    getTool,
    getAllTools,

    clients,
    registerClient,
    unregisterClient,
  };
};