import { InteractivityState, ScanView } from '@3cr/types-ts';
import { ref, watch } from 'vue';
import { useViewer3cr } from '@/composables/useViewer3cr';
import { useViewerStore } from '@/stores/viewer.store';
import { storeToRefs } from 'pinia';
import { DataOverlayAnnotation } from '@3cr/viewer-types-ts';
import { useMouse } from '@vueuse/core';

export function useAnnotationCreateTool() {
  const viewer3cr = useViewer3cr();
  const { activeView } = storeToRefs(useViewerStore());
  const { x: _x, y: _y } = useMouse({ target: document.body });

  const isActive = ref<boolean>(false);
  const position = ref<[number, number]>([0, 0]);
  const annotation = ref<DataOverlayAnnotation | null>(null);
  const returnTo = ref<string>('');

  viewer3cr.addActionHandler('mu_01', onAnnotate2d);

  watch([isActive, activeView], async ([isActive, activeView]) => {
    if (
      isActive &&
      activeView !== undefined &&
      activeView !== ScanView.Volume
    ) {
      await annotation2d(true);
    }
  });

  watch(isActive, async (isActive) => {
    if (!isActive) {
      annotation.value = null;
      await annotation2d(false);
    }
  });

  async function annotation2d(value: boolean): Promise<void> {
    const message: InteractivityState = { Version: '0.0.0', Value: value };
    await viewer3cr.createAnnotation2dTool({ message });
  }

  async function onAnnotate2d(
    _: string,
    channel: string,
    to: string,
  ): Promise<void> {
    if (isActive.value) {
      annotation.value = JSON.parse(channel) as DataOverlayAnnotation;
      returnTo.value = to;
      position.value = [_x.value, _y.value];
    }
  }

  return { isActive, position, annotation, returnTo };
}