import { describe, expect, it } from "vite-plus/test";

import {
  resizeBrowserViewportFromRail,
  resizeFreeformViewport,
  resolveBrowserDeviceViewportLayout,
  resolveBrowserViewportLayout,
  resolveResponsiveBrowserViewportSize,
} from "./browserViewportLayout";

describe("resolveBrowserViewportLayout", () => {
  it("fills the available surface in fill mode", () => {
    expect(resolveBrowserViewportLayout({ width: 700, height: 500 }, { _tag: "fill" })).toEqual({
      canvasWidth: 700,
      canvasHeight: 500,
      viewportX: 0,
      viewportY: 0,
      viewportWidth: 700,
      viewportHeight: 500,
      viewportScale: 1,
      fillsPanel: true,
    });
  });

  it("centers a smaller fixed viewport", () => {
    expect(
      resolveBrowserViewportLayout(
        { width: 700, height: 1000 },
        { _tag: "freeform", width: 393, height: 852 },
      ),
    ).toMatchObject({
      canvasWidth: 700,
      canvasHeight: 1000,
      viewportX: 154,
      viewportY: 74,
      viewportWidth: 393,
      viewportHeight: 852,
    });
  });

  it("scales a larger fixed viewport down to fit without creating overflow", () => {
    const layout = resolveBrowserViewportLayout(
      { width: 600, height: 700 },
      { _tag: "freeform", width: 1440, height: 900 },
    );
    expect(layout).toMatchObject({
      canvasWidth: 600,
      canvasHeight: 700,
      viewportX: 0,
      viewportY: 163,
      viewportWidth: 600,
      viewportHeight: 375,
    });
    expect(layout.viewportScale).toBeCloseTo(5 / 12);
  });

  it("keeps fixed dimensions in page CSS pixels when browser zoom changes", () => {
    expect(
      resolveBrowserViewportLayout(
        { width: 800, height: 700 },
        { _tag: "freeform", width: 400, height: 300 },
        1.5,
      ),
    ).toMatchObject({
      viewportX: 100,
      viewportY: 125,
      viewportWidth: 600,
      viewportHeight: 450,
    });
    expect(resizeFreeformViewport({ width: 400, height: 300 }, { x: 150, y: 75 }, 1.5)).toEqual({
      width: 500,
      height: 350,
    });
  });

  it("bounds freeform drag sizes and total render area", () => {
    expect(resizeFreeformViewport({ width: 1024, height: 768 }, { x: -2000, y: -2000 })).toEqual({
      width: 240,
      height: 240,
    });
    const large = resizeFreeformViewport({ width: 1920, height: 1080 }, { x: 2000, y: 2000 });
    expect(large.width * large.height).toBeLessThanOrEqual(3840 * 2160);
  });

  it("resizes only the axes controlled by each edge", () => {
    expect(
      resizeFreeformViewport({ width: 800, height: 600 }, { x: -100, y: 500 }, 1, "west"),
    ).toEqual({ width: 900, height: 600 });
    expect(
      resizeFreeformViewport({ width: 800, height: 600 }, { x: 500, y: 100 }, 1, "north"),
    ).toEqual({ width: 800, height: 500 });
    expect(
      resizeFreeformViewport({ width: 800, height: 600 }, { x: -100, y: -50 }, 1, "northwest"),
    ).toEqual({ width: 900, height: 650 });
  });

  it("preserves a locked aspect ratio from either axis", () => {
    expect(
      resizeFreeformViewport({ width: 800, height: 600 }, { x: 200, y: 0 }, 1, "east", 4 / 3),
    ).toEqual({ width: 1000, height: 750 });
    expect(
      resizeFreeformViewport({ width: 800, height: 600 }, { x: 0, y: 150 }, 1, "south", 4 / 3),
    ).toEqual({ width: 1000, height: 750 });
  });

  it("reserves persistent device-toolbar rails around the guest viewport", () => {
    expect(
      resolveBrowserDeviceViewportLayout(
        { width: 1200, height: 900 },
        { _tag: "freeform", width: 1180, height: 858 },
      ),
    ).toEqual({
      canvasWidth: 1200,
      canvasHeight: 900,
      viewportX: 10,
      viewportY: 32,
      viewportWidth: 1180,
      viewportHeight: 858,
      viewportScale: 1,
      fillsPanel: false,
    });
  });

  it("captures the available framed area when responsive mode is enabled", () => {
    expect(resolveResponsiveBrowserViewportSize({ width: 1200, height: 900 })).toEqual({
      width: 1180,
      height: 858,
    });
    expect(resolveResponsiveBrowserViewportSize({ width: 1200, height: 900 }, 2)).toEqual({
      width: 590,
      height: 429,
    });
  });

  it("keeps the grabbed rail under the pointer across centered layout boundaries", () => {
    const available = { width: 1120, height: 818 };
    expect(
      resizeBrowserViewportFromRail(
        { width: 1120, height: 818 },
        { x: -100, y: -50 },
        available,
        1,
        "southeast",
      ),
    ).toEqual({ width: 920, height: 718 });
    expect(
      resizeBrowserViewportFromRail(
        { width: 800, height: 600 },
        { x: 300, y: 0 },
        { width: 1200, height: 800 },
        1,
        "east",
      ),
    ).toEqual({ width: 1300, height: 600 });
    expect(
      resizeBrowserViewportFromRail(
        { width: 560, height: 409 },
        { x: -100, y: 0 },
        available,
        2,
        "east",
      ),
    ).toEqual({ width: 460, height: 409 });
  });
});