import { onUnmounted, ref, SetupContext, watch } from 'vue';
import loglevel from 'loglevel';
import { ComponentModel } from './cykLang';
const logger = loglevel.getLogger('DialogComponent.vue');
logger.setLevel('info');


export function useCykDialog(props: { formComponent: ComponentModel | undefined }, context: SetupContext<('hidefn' | 'escape')[]>) {
  logger.debug('DialogComponent DEBUT');
  const model = ref(true);
  const refDialog = ref(null);
  let hiddenByProg = false;
  context.emit('hidefn', async () => {
    hiddenByProg = true;
    model.value = false;
    let delayms = 0;
    if (refDialog.value !== undefined && refDialog.value !== null)
      delayms = refDialog.value['transitionDuration'];
    logger.debug('=========== Dialog Hide transition-duration ' + delayms);
    logger.debug(refDialog.value);
    await new Promise<void>((resolve) =>
      setTimeout(() => {
        resolve();
      }, delayms || 300)
    );
  });

  watch(model, () => {
    if (model.value === false && hiddenByProg === false) {
      // dialog closed by user by hitting ESC or clicking outside the dialog
      // inform the parent to make housekeeping
      context.emit('escape');
    }
  });

  const persistent = ref(false);

  const dirtyListener = () => {
    if (props.formComponent !== undefined && props.formComponent.dirtyManager)
      persistent.value = props.formComponent.dirtyManager.isDirty();
  };

  if (props.formComponent !== undefined && props.formComponent.dirtyManager)
    props.formComponent.dirtyManager.addDirtyListener(dirtyListener);

  onUnmounted(() => {
    if (props.formComponent !== undefined && props.formComponent.dirtyManager)
      props.formComponent.dirtyManager.removeDirtyListener(
        dirtyListener
      );
  });

  return { model, refDialog, persistent };
}