import { describe, expect, it } from "vitest";

const fs = await import(["node", "fs"].join(":"));
const modelCss = fs.readFileSync("src/components/ModelSelector.css", "utf8");
const quickPaneCss = fs.readFileSync("src/quick-pane/quick-pane.css", "utf8");

describe("dropdown CSS", () => {
  it("keeps regular model menu capped with scrolling results", () => {
    expect(modelCss).toMatch(
      /\.model-menu\s*\{[\s\S]*max-height:\s*min\(420px, calc\(100vh - 80px\)\)/,
    );
    expect(modelCss).toMatch(/\.model-results\s*\{[\s\S]*overflow-y:\s*auto/);
    expect(modelCss).toMatch(/\.model-option\[aria-selected="true"\]/);
  });

  it("caps compact menus to Quick Pane container below titlebar and toolbar", () => {
    expect(quickPaneCss).toMatch(
      /\.quick-pane\s*\{[\s\S]*container-type:\s*size/,
    );
    expect(quickPaneCss).toMatch(
      /\.quick-pane \.model-menu\s*\{[\s\S]*max-height:\s*min\(350px, calc\(100cqh - 74px\)\)/,
    );
    expect(quickPaneCss).toMatch(
      /\.quick-pane \.model-menu\s*\{[\s\S]*width:\s*min\(400px, calc\(100cqw - 24px\)\)/,
    );
  });
});