// import Codemirror from 'codemirror-editor-vue3';
// import 'codemirror/mode/xml/xml';
// import 'codemirror/theme/dracula.css';
import loglevel from 'loglevel';
import { useCykLang, ComponentModel, ChangeWorker, getVarValue, setVarValue } from './cykLang';
// import { getVarValue, setVarValue } from 'src/services/cyklang';
import { componentModelParameter } from './cykReact';
import { computed, onUnmounted, ref, watch } from 'vue';
const logger = loglevel.getLogger('TextEditComponent.vue');
logger.setLevel('debug');



export function useCykTextEdit(props: { componentArg: ComponentModel | undefined }) {
  // const { getVarValue, setVarValue } = useCykLang();
  logger.debug(
    'textedit.label ' + props.componentArg?.objectData?.tag.attributes.LABEL
  );
  const isLoading = ref(true);

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

  // onchange

  let changeWorker: ChangeWorker | undefined

  const onchangeFunction = props.componentArg?.objectData?.variables.getFunction('onchange');
  if (onchangeFunction && props.componentArg?.objectData) {
    changeWorker = new ChangeWorker(onchangeFunction, props.componentArg?.objectData.scope)
  }

  const cmOptions = {
    mode: 'text/xml',
    theme: 'default',
    lineNumbers: true,
    smartIndent: true,
    indentUnit: 2,
    foldGutter: true,
    styleActiveLine: true,
  };

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

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

  const model = computed<string | undefined>({
    get() {
      let result: string | undefined;
      const variable = props.componentArg?.model;

      const varValue = getVarValue(variable);
      if (typeof varValue === 'string') {
        result = varValue;
      }

      // logger.debug('====== TextEdit.get ' + debug_label + ' = ' + result);
      return result;
    },

    set(nval) {
      // logger.debug(`==== TextEdit.set( ${nval} )`);
      const variable = props.componentArg?.model;
      if (variable !== undefined) {
        setVarValue(variable, nval);

        // logger.debug('--- TextEdit.set ' + debug_label + ' = ' + variable.data);
      }
      // console.log(nval);
    },
  });

  if (
    props.componentArg !== undefined &&
    props.componentArg.model !== undefined && props.componentArg.dirtyManager
    && props.componentArg.objectData?.tag.attributes['IGNORE-DIRTY'] === undefined    
  )
    props.componentArg.dirtyManager.registerVariable(
      props.componentArg.model,
      props.componentArg.objectData?.tag.attributes.LABEL || 'no label'
    );

  watch(model, () => {

    changeWorker?.onchangeRequired()

    if (
      props.componentArg === undefined ||
      props.componentArg.model === undefined
    )
      return;

    // logger.debug(
    //   '===== watch ' + debug_label + ' new ' + first + ' old ' + second
    // );
    props.componentArg.dirtyManager?.variableChanged(props.componentArg.model)
    // props.componentArg.variableReact?.variableChanged(
    //   props.componentArg.model
    // );
  });

  onUnmounted(() => {
    props.componentArg?.objectData?.destroy()
  });

  return { isLoading, visible, model, cmOptions };
}