import { Ref, ref } from 'vue';
import loglevel from 'loglevel';
import { useCykStore } from './cykStore';
import { ObjectData } from '@cyklang/core';
import { buildComponentArray } from './WindowManager';
import { ComponentModel } from './cykLang'
import { VariableReact } from './cykReact';
const logger = loglevel.getLogger('ToolbarComponent.vue');
logger.setLevel('debug');


export function useCykToolbar(props: { toolbarData: ObjectData | undefined }): { isLoading: Ref<boolean>, components: Ref<ComponentModel[]> } {
  const isLoading = ref(true);
  const store = useCykStore();
  const components: Ref<ComponentModel[]> = ref([]);

  (async () => {
    if (props.toolbarData !== undefined) {
      if (store.variableReact === undefined)
        throw 'store.variableReact undefined';
      const componentModel = new ComponentModel(
        props.toolbarData,
        undefined,
        store.variableReact as VariableReact
      );
      await buildComponentArray(componentModel, components);
      isLoading.value = false;
    }
  })();

  return { isLoading, components };
}