import assert from "node:assert/strict";
import { after, before, test } from "node:test";
import React from "react";
import { renderToStaticMarkup } from "react-dom/server";

import { createServer } from "vite";

let server;
let backgroundMedia;

before(async () => {
  server = await createServer({
    appType: "custom",
    logLevel: "silent",
    server: { middlewareMode: true },
  });
  backgroundMedia = await server.ssrLoadModule(
    "/src/components/EnvironmentBackgroundMedia.tsx",
  );
});

after(async () => {
  await server?.close();
});

test("background playlist starts with its oldest media item", () => {
  const markup = renderToStaticMarkup(
    React.createElement(backgroundMedia.EnvironmentBackgroundMedia, {
      background: {
        enabled: true,
        imageDurationSeconds: 10,
        items: [
          {
            id: "media-oldest",
            source: "url",
            url: "https://example.test/oldest.png",
            mediaKind: "image",
            fileName: null,
          },
          {
            id: "media-newest",
            source: "url",
            url: "https://example.test/newest.mp4",
            mediaKind: "video",
            fileName: null,
          },
        ],
      },
    }),
  );

  assert.match(markup, /oldest\.png/);
  assert.doesNotMatch(markup, /newest\.mp4/);
});

test("disabled background renders no media", () => {
  const markup = renderToStaticMarkup(
    React.createElement(backgroundMedia.EnvironmentBackgroundMedia, {
      background: {
        enabled: false,
        imageDurationSeconds: 10,
        items: [
          {
            id: "media-hidden",
            source: "url",
            url: "https://example.test/hidden.png",
            mediaKind: "image",
            fileName: null,
          },
        ],
      },
    }),
  );

  assert.equal(markup, "");
});