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 });
    },
    { immediate: true },
  );

  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 };
}