import { PrimitiveData, Variable } from '@cyklang/core';
import { getLogger } from 'loglevel';
import { useCykLang } from './cykLang';
import { ComponentModel } from './cykLang'
import { computed, onUnmounted, ref } from 'vue';
import { AlertException } from './cykRun';
const logger = getLogger('HtmlComponent.vue');
logger.setLevel('debug');


export function useCykHtml(props: { componentArg: ComponentModel | undefined }) {
  const { dbRemote, getDBManager } = useCykLang();
  const isLoading = ref(true);
  const html = ref('');
  // logger.debug('html setup begin', props.componentArg?.objectData.tag);
  if ( ! props.componentArg || ! props.componentArg?.objectData) throw 'props.componentArg undefined'
  const varHtml = new Variable(props.componentArg.objectData.scope.structure.stringDataType)

  const refHtml = ref(varHtml);

  const refCompute = ref<Variable>();
  // let reactCompute: ReactListener;

  const modelHtml = computed<string>({
    get() {

      let result = ''
      if (refHtml.value !== undefined && refHtml.value.data !== undefined && refHtml.value.data !== null) {
        result = (refHtml.value.data as PrimitiveData).value as string
      }
      return result;
    },
    set() {
      logger.error('set should not be called');
    },
  });

  (async () => {
    try {
      if (props.componentArg === undefined)
        throw 'props.componentArg undefined';
      let formula: string | undefined
      let interpolate: boolean

      if (
        props.componentArg.objectData?.tag.attributes.LITERAL !== undefined
      ) {
        formula = props.componentArg.objectData.tag.getText();
        interpolate = true
      } else
      if (
        props.componentArg.objectData?.tag.attributes.HREF !== undefined
      ) {
        formula = await dbRemote.apiServer.get(
          props.componentArg.objectData.tag.attributes.HREF
        );
        interpolate = true
      } else {
        formula = props.componentArg.objectData?.tag.getText();
        interpolate = false
      }

      const dbManager = await getDBManager();
      refCompute.value = new Variable(
        dbManager.scope.structure.stringDataType
      );


      logger.debug('HtmlComponent', varHtml.data);

      await props.componentArg.interpolateAttributes()
    } catch (err) {
      AlertException(err)
    }
  })().finally(() => {
    isLoading.value = false;
  });

  onUnmounted(() => {
    if (props.componentArg === undefined) return;
  });

  return { isLoading, html, modelHtml, refCompute };
}