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


export function useCykCardSection(props: { componentArg: ComponentModel | undefined })
: { isLoading: Ref<boolean>, components: Ref<ComponentModel[]>, visible: WritableComputedRef<boolean>, title: WritableComputedRef<string>, subtitle: WritableComputedRef<string> } {

  const visible = componentModelParameter<boolean>(props.componentArg, "visible", true)
  const title = componentModelParameter<string>(props.componentArg, "title", "")
  const subtitle = componentModelParameter<string>(props.componentArg, "subtitle", "")

  const components: Ref<ComponentModel[]> = ref([]);
  const isLoading = ref(true);

  (async () => {
    if (props.componentArg && props.componentArg.objectData) {
      await buildComponentArray(props.componentArg, components);
      isLoading.value = false;
    }
  })();

  onUnmounted(() => {

    props.componentArg?.objectData?.destroy()

  });
  return {
    components,
    isLoading,
    visible,
    title,
    subtitle
  };
}