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

export const SymFormattingToolbarActiveClient = Symbol('Schlechtenburg inline active client');
export const SymFormattingToolbarClients = Symbol('Schlechtenburg inline toolbar client elements');
export const SymFormattingToolLibrary = Symbol('Schlechtenburg inline tool library');

export const useFormattingToolbar = () => {
  const clients: Ref<HTMLElement[]> = inject(SymFormattingToolbarClients, ref([]));
  const activeClient: Ref<HTMLElement|null> = inject(SymFormattingToolbarActiveClient, ref(null));

  const setActiveClient = (client: HTMLElement|null) => {
    activeClient.value = client;
  };

  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));
  };

  const tools: IFormattingToolLibrary = inject(SymFormattingToolLibrary, reactive({}));
  const getTool = (name: string) => tools[name];
  const getAllTools = () => Object.keys(tools).map(name => tools[name]);

  return {
    clients,
    activeClient,
    setActiveClient,
    registerClient,
    unregisterClient,

    tools,
    getTool,
    getAllTools,
  };
};