import { fullscreenView, isFullscreen, scanState } from '@/models/scanState';
import { AnchorPoint, InteractivityState, NavigationCubeTransform, ScanView } from '@3cr/types-ts';
import { useViewer3cr } from '@/composables/useViewer3cr';
import { watch, ref, MaybeRef, computed } from 'vue';
import { useElementBounding } from '@vueuse/core';
import { useActiveLayout } from '@/components/modal/layouts/composables/useActiveLayout';

// TODO: possible move to store?
export const isVisible = ref<boolean>(true);

const volume = computed(() => {
  return scanState.value.Layout.PositionData.find((p) => p.DefaultView === ScanView.Volume)?.Anchor;
});

export function useNavigationCube(canvas: MaybeRef<HTMLCanvasElement | null | undefined>) {
  const viewer3cr = useViewer3cr();
  const { width: canvasWidth } = useElementBounding(canvas);
  const { layout } = useActiveLayout(volume, canvas, 0);

  const bounds = computed(() => {
    const width = canvasWidth.value * window.devicePixelRatio * 0.1;
    const height = canvasWidth.value * window.devicePixelRatio * 0.1; // height proportional to canvas width so cube is always square
    const x = (layout.value.x + layout.value.width) * window.devicePixelRatio - width;
    const y = (layout.value.y + layout.value.height) * window.devicePixelRatio - height;
    return { x, y, width, height };
  });

  watch(bounds, async ({ x, y, width, height }) => {
    const message: NavigationCubeTransform = {
      Version: '0.0.0',
      AnchorPoint: AnchorPoint.TOP_LEFT,
      Position: { Version: '0.0.0', X: x, Y: y },
      Size: { Version: '0.0.0', X: width, Y: height }
    };
    await viewer3cr.setNavCubePositionSize({ message });
  });

  watch([isVisible, isFullscreen, fullscreenView], async ([isVisible, isFullscreen, fullscreenView]) => {
    if (!isFullscreen || fullscreenView === ScanView.Volume) {
      const message: InteractivityState = { Version: '0.0.0', Value: isVisible };
      await viewer3cr.setNavCubeVisibility({ message });
    } else {
      // Disable navigation cube when fullscreen on a 2D view
      const message: InteractivityState = { Version: '0.0.0', Value: false };
      await viewer3cr.setNavCubeVisibility({ message });
    }
  });

  return { bounds };
}