import { Ref, ref } from 'vue';
import { buildComponentArray } from './WindowManager';
import { ComponentModel } from './cykLang'
import loglevel from 'loglevel';
import { GRID_ATTS } from './cykGrid';
const logger = loglevel.getLogger('GridComponent.vue');
logger.setLevel('info');

export function useCykCard(props: { componentArg: ComponentModel | undefined })
: { loading: Ref<boolean>, components: Ref<ComponentModel[]> } {
  const components: Ref<ComponentModel[]> = ref([]);
  const loading = ref(true);

  (async () => {

    if (props.componentArg !== undefined) {
      await buildComponentArray(props.componentArg, components);
      await props.componentArg.interpolateAttributes()
      for(let ind = 0; ind < components.value.length; ind++) {
        const component = components.value[ind]
        await component.interpolateAttributes()
      }
      loading.value = false;
    }
  })();

  return {
    components,
    loading,
  };
}