import { computed, MaybeRef } from 'vue';
import { isFullscreen, isLayout1x3, isLayout2x2 } from '@/models/scanState';
import { useLayout2x2 } from '@/components/modal/layouts/composables/useLayout2x2';
import { useLayout1x3 } from '@/components/modal/layouts/composables/useLayout1x3';
import { useLayoutFullscreen } from '@/components/modal/layouts/composables/useLayoutFullscreen';
import { AnchorPoint } from '@3cr/types-ts';

export function useActiveLayout(
  anchor: MaybeRef<AnchorPoint | null | undefined>,
  canvas: MaybeRef<HTMLCanvasElement | null | undefined>,
  padding: MaybeRef<number | null | undefined>,
) {
  const { layout: layout2x2 } = useLayout2x2(anchor, canvas, padding);
  const { layout: layout1x3 } = useLayout1x3(anchor, canvas, padding);
  const { layout: fullscreen } = useLayoutFullscreen(anchor, canvas, padding);

  const layout = computed(() => {
    if (isFullscreen.value) {
      return fullscreen.value;
    } else if (isLayout2x2.value) {
      return layout2x2.value;
    } else if (isLayout1x3.value) {
      return layout1x3.value;
    } else {
      return { width: 0, height: 0, x: 0, y: 0 };
    }
  });

  return { layout };
}