import _Map from '../../../map/map';
import { reactive, App, toRefs } from 'vue';
import { mountComponent } from '../utils';
import LayerMode from './LayerMode.vue';

function createInstance(map: _Map) {
  const { container } = map;
  const { instance, unmount } = mountComponent(
    {
      setup(props, ctx) {
        const state = reactive({
          // viewMode: '2D' as IViewMode
        });
        const state2 = {
          teleportTo: `#${container} .ktmap-controls`,
          map
        };

        const emits = {
          // 'onUpdate:viewMode'(val: any) {
          //   // state.viewMode = val
          // }
        };

        // const destroy = () => {
        //   unmount()
        // }

        ctx.expose({
          ...toRefs(state)
        });
        return () => <LayerMode {...state} {...state2} {...emits} />;
      }
    },
    container
  );
  return instance;
}

const Comp = (map: _Map) => {
  const instance = createInstance(map);
  return instance;
};

// Comp.init = (container: string) => {
//   const instance = createInstance(container)
//   return instance
// }

// // @ts-ignore
// RNInput.install = (app: App) => {
//   app.component(RNInputComp.name, RNInputComp)
//   app.config.globalProperties.$rnInput = RNInput
// }

export default Comp;
