import { data2boolean, FunctionData, Variables } from '@cyklang/core';
import {
  CloseFormInstructionType,
} from './WindowManager';
import { ComponentModel, useCykLang } from './cykLang'
import { nextTick, onUnmounted, ref, watch } from 'vue';
import loglevel from 'loglevel';
import { ComponentModelParameter, componentModelParameter } from './cykReact';
import { AlertException } from './cykRun';
const logger = loglevel.getLogger('ButtonComponent.vue');
logger.setLevel('debug');


export function useCykButton(props: { componentArg: ComponentModel | undefined }) {
  const isLoading = ref(true);

  const { structure } = useCykLang()
  
  const cpVisible = new ComponentModelParameter<boolean>(props.componentArg, "visible", true)
  const visible = cpVisible.model
  
  // const visible = componentParameter<boolean>(props.componentArg, "visible", true)

  const label = componentModelParameter<string>(props.componentArg, "label", structure.scope.xlate(props.componentArg?.objectData?.tag.attributes.LABEL))
  const tooltip = componentModelParameter<string>(props.componentArg, "tooltip", "");

  const disable = componentModelParameter<boolean>(props.componentArg, "disable", false)

  const isProcessing = ref(false);

  const doLoading = async () => {
    try {
      if (!props.componentArg) return
            
      await props.componentArg.interpolateAttributes()
    }
    catch (err) {
      logger.error(err)
    }
    finally {
      isLoading.value = false;
    }
  };
  doLoading()

  const onClick = () => {

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

      isProcessing.value = true

      try {
        const closeformInstType =
          await props.componentArg.objectData?.scope.lookupInstructionType(
            'closeform'
          );
        if (closeformInstType === undefined)
          throw 'closeform instructiontype not found';

        if (
          props.componentArg.objectData?.tag.attributes.VALIDATE_FORM !==
          undefined
        ) {
          const formValide = await (
            closeformInstType as CloseFormInstructionType
          ).windowManager.validateForm();
          // logger.debug('////////  formValide ' + formValide);
          if (formValide === false) return;
        }

        if (
          props.componentArg.objectData?.tag.attributes.VALIDATE_DIALOG !==
          undefined
        ) {
          // logger.debug('///// before validateModalDialog');
          const dialogValide = await (
            closeformInstType as CloseFormInstructionType
          ).windowManager.validateModalDialog();
          // logger.debug('////////  dialogValide ' + dialogValide);
          if (dialogValide === false) return;
        }

        const varOnclick =
          props.componentArg.objectData?.variables.getVariable('onclick');
        if (props.componentArg  && varOnclick && props.componentArg.objectData) {
          // logger.debug('onclick found');

          if (varOnclick.dataType.name !== 'function') {
            // logger.debug('onclick is not a function');
          } else {
            const functionData = varOnclick.data as FunctionData;
            await functionData.callFunction(
              new Variables(),
              props.componentArg.objectData?.scope 
            );
          }
        }
      } catch (err) {
        AlertException(err)
      }
      finally {
        isProcessing.value = false
      }
    })();
  };

  const dirtyListener = () => {
    if (props.componentArg !== undefined && props.componentArg.dirtyManager !== undefined)
      visible.value = props.componentArg.dirtyManager?.isDirty();
    // logger.debug('button.dirtyListener isDirty = ' + props.componentArg?.dirtyManager?.isDirty())
  };

  if (
    props.componentArg !== undefined &&
    (props.componentArg.objectData?.tag.attributes.SAVE !== undefined || props.componentArg.objectData?.tag.attributes['IF-DIRTY'] !== undefined)
  ) {
    visible.value = false;
    props.componentArg.dirtyManager?.addDirtyListener(dirtyListener);
    // logger.debug('button dirtyListener added to', props.componentArg.dirtyManager)
  }

  onUnmounted(() => {
    if (
      props.componentArg !== undefined &&
      (props.componentArg.objectData?.tag.attributes.SAVE !== undefined || props.componentArg.objectData?.tag.attributes['IF-DIRTY'] !== undefined)
    ) {
      props.componentArg.dirtyManager?.removeDirtyListener(dirtyListener);
    }

    props.componentArg?.objectData?.destroy()
    cpVisible.destroy()
  });

  return { isLoading, visible, label, tooltip, onClick, disable, isProcessing };
}