import { Component, createApp } from 'vue';

export const DEFAULT_CLS = (name = '*') => `ktmap-controls__${name}`;

/**
 * @desc 动态挂载组件
 */
const createConstrols = ($container: HTMLElement) => {
  let $constrols = $container.querySelector('.ktmap-controls');
  if (!$constrols) {
    $constrols = document.createElement('div');
    $constrols.className = 'ktmap-controls';
    $constrols.addEventListener('click', e => {
      e.stopPropagation();
    });
    $container.appendChild($constrols);
  }
  return $constrols;
};
export function mountComponent(RootComponent: Component, container: string) {
  const $container = document.getElementById(container)!;
  const $constrols = createConstrols($container);

  const app = createApp(RootComponent);
  const root = document.createElement('div');
  $constrols.appendChild(root);
  return {
    instance: app.mount(root),
    unmount() {
      app.unmount();
      // document.body.removeChild(root)
      $constrols.removeChild(root);
    }
  };
}
