import test from "node:test";
import assert from "node:assert/strict";

import {
  clampDropdownToViewport,
  constrainFloatingMenuToViewport,
} from "./dropdown-position.ts";

test("dropdown keeps the anchor width when it fits inside the viewport", () => {
  assert.deepEqual(clampDropdownToViewport({
    anchorLeft: 24,
    anchorWidth: 240,
    viewportWidth: 390,
  }), { left: 24, width: 240 });
});

test("dropdown moves inside the right viewport edge", () => {
  assert.deepEqual(clampDropdownToViewport({
    anchorLeft: 220,
    anchorWidth: 240,
    viewportWidth: 390,
  }), { left: 142, width: 240 });
});

test("dropdown shrinks to the safe mobile viewport width", () => {
  assert.deepEqual(clampDropdownToViewport({
    anchorLeft: -30,
    anchorWidth: 420,
    viewportWidth: 320,
  }), { left: 8, width: 304 });
});

test("floating menu stays in its natural position when it fits", () => {
  assert.deepEqual(constrainFloatingMenuToViewport({
    anchorTop: 100,
    menuHeight: 180,
    menuLeft: 120,
    menuTop: 140,
    menuWidth: 220,
    viewportHeight: 700,
    viewportWidth: 390,
  }), {
    maxHeight: null,
    maxWidth: 366,
    translateX: 0,
    translateY: 0,
  });
});

test("floating menu shifts horizontally and opens above a low trigger", () => {
  assert.deepEqual(constrainFloatingMenuToViewport({
    anchorTop: 620,
    menuHeight: 240,
    menuLeft: -40,
    menuTop: 660,
    menuWidth: 260,
    viewportHeight: 700,
    viewportWidth: 390,
  }), {
    maxHeight: 240,
    maxWidth: 366,
    translateX: 52,
    translateY: -288,
  });
});

test("floating menu becomes scrollable in the larger available direction", () => {
  assert.deepEqual(constrainFloatingMenuToViewport({
    anchorTop: 90,
    menuHeight: 640,
    menuLeft: 20,
    menuTop: 130,
    menuWidth: 220,
    viewportHeight: 400,
    viewportWidth: 320,
  }), {
    maxHeight: 258,
    maxWidth: 296,
    translateX: 0,
    translateY: 0,
  });
});