import assert from 'node:assert/strict';
import { test } from 'node:test';
import { Element, install, nodes, server, settle } from './flow-helpers.mjs';

install();
const { storyPage } = await import('../../bindery/static/js/story.js');

const details = (cover) => ({
  story: { id: 1, title: 'Story', author: 'Writer', url: 'https://example.com/story', site: 'example.com',
    locked_fields: [], pinned: {}, site_values: {}, auto_update: true, status: 'ok', cover },
  chapters: [],
  recent_chapters: 0,
});
const rules = { rules: [], paragraphs: null, global_paragraphs: false };

async function render(t, cover) {
  const backend = server(t);
  backend.on('GET', 'stories/1', details(cover));
  backend.on('GET', 'stories/1/rules', rules);
  backend.on('GET', 'jobs?story_id=1', []);
  const main = new Element('main');
  const cleanup = storyPage(main, { storyId: '1' }, { metadata_fields: {}, mode_labels: {} });
  await settle();
  cleanup?.();
  const summary = nodes(main).find((el) => el.className === 'card story-summary');
  return summary.children.filter((el) => el instanceof Element);
}

test('the cover comes first in the story summary, with its version in the URL', async (t) => {
  const [cover, heading] = await render(t, 'abc123');
  assert.equal(cover.tagName, 'img');
  assert.equal(cover.className, 'cover');
  assert.equal(cover.attributes.src, 'api/stories/1/cover?v=abc123');
  assert.equal(heading.className, 'story-heading');
  assert.equal(heading.children[0].textContent, 'Story');
});

test('a story without a cover shows only its heading', async (t) => {
  const children = await render(t, null);
  assert.deepEqual(children.map((el) => el.className), ['story-heading']);
});