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

import videoCard from "./VideoCard.tsx?raw";

import {
  MEDIA_BAR,
  MEDIA_HOVER_LAYER,
  MEDIA_PICTURE_CONTAINER,
  MEDIA_RESUME_LAYER,
  mediaPictureBox,
} from "./ui/mediaCardStyles";

// Measured: at text size 1.3 a 242px feed thumbnail put the 63px Play 13px into the 37px hover
// row (the Play and the row grow with the root font, the picture's height does not). A narrow picture
// (under 14rem, so the cut moves with the text size) centres what it carries above the row instead.
describe("a media picture", () => {
  it("is a size container, so what sits on it answers its width", () => {
    expect(mediaPictureBox("wide")).toContain(MEDIA_PICTURE_CONTAINER);
    expect(mediaPictureBox("poster")).toContain(MEDIA_PICTURE_CONTAINER);
    // The video card draws its own box (it is not a mediaPictureBox).
    expect(videoCard).toContain('clsx("relative min-h-0", MEDIA_PICTURE_CONTAINER, className)');
  });

  it.each([
    ["the Play", MEDIA_HOVER_LAYER],
    ["the Continue + Restart pair", MEDIA_RESUME_LAYER],
  ])("leaves the hover row its band when narrow: %s", (_, layer) => {
    expect(layer.split(" ")).toContain("@max-[14rem]/pic:pb-(--bar-room)");
  });

  // The lift once applied to every narrow picture, and the feed's row and tile views (a
  // 10rem thumbnail, no hover row) showed their Play 1.25rem above centre over an empty band. The band
  // is now the row's own: set only by a box that holds one.
  it("lifts it only where a hover row is there to clear", () => {
    expect(MEDIA_BAR.split(" ")).toContain("media-bar");
    expect(MEDIA_PICTURE_CONTAINER.split(" ")).toContain("has-[.media-bar]:[--bar-room:2.5rem]");
    for (const layer of [MEDIA_HOVER_LAYER, MEDIA_RESUME_LAYER])
      expect(layer).not.toMatch(/pic:pb-\d/);
  });
});