import { computed, MaybeRef, unref } from 'vue';
import { AnchorPoint } from '@3cr/types-ts';
import { useElementBounding } from '@vueuse/core';

export function useLayout1x3(
  anchor: MaybeRef<AnchorPoint | null | undefined>,
  canvas: MaybeRef<HTMLCanvasElement | null | undefined>,
  padding: MaybeRef<number | null | undefined>,
) {
  const { width, height } = useElementBounding(canvas);

  const layout = computed(() => {
    const w = width.value;
    const h = height.value;
    const p = unref(padding) ?? 0;
    const a = unref(anchor) ?? AnchorPoint.DEFAULT;

    switch (a) {
      case AnchorPoint.CENTER: {
        const x = p;
        const y = p;
        const width = Math.max(w - h / 3 - p, 0);
        const height = Math.max(h - p * 2, 0);
        return { x, y, width, height };
      }
      case AnchorPoint.TOP_RIGHT: {
        const x = w - h / 3 + p;
        const y = p;
        const width = Math.max(h / 3 - p * 2, 0);
        const height = Math.max(h / 3 - p, 0);
        return { x, y, width, height };
      }
      case AnchorPoint.RIGHT: {
        const x = w - h / 3 + p;
        const y = h / 3 + p;
        const width = Math.max(h / 3 - p * 2, 0);
        const height = Math.max(h / 3 - p, 0);
        return { x, y, width, height };
      }
      case AnchorPoint.BOTTOM_RIGHT: {
        const x = w - h / 3 + p;
        const y = (h / 3) * 2 + p;
        const width = Math.max(h / 3 - p * 2, 0);
        const height = Math.max(h / 3 - p * 2, 0);
        return { x, y, width, height };
      }
      default:
        return { x: 0, y: 0, width: 0, height: 0 };
    }
  });

  return { layout };
}