// SourceList and SourceCard — the getting-started target (#398). No jsdom:
// react-dom/server renders in vitest's node environment, and the markup says
// which card carries the highlight.
import { describe, it, expect, vi } from "vitest";
import { renderToStaticMarkup } from "react-dom/server";

vi.mock("react-i18next", () => ({
  useTranslation: () => ({
    t: (k: string, o?: Record<string, unknown>) =>
      o ? `${k}[${Object.entries(o).map(([a, b]) => `${a}=${String(b)}`).join(",")}]` : k,
    i18n: { language: "fr" },
  }),
}));

import SourceList from "./SourceList";
import { SOURCE_CARD_TARGET } from "./SourceCard";
import type { ScannedSource } from "../../shared/types";

const HIGHLIGHT = 'data-onboarding-highlight="true"';

const source = (name: string): ScannedSource => ({
  folder_name: name,
  folder_path: `/releves/${name}`,
  files: [{ filename: "releve.csv", file_path: `/releves/${name}/releve.csv`, size_bytes: 10, modified_at: "" }],
});

const SOURCES = [source("Desjardins"), source("Tangerine"), source("RBC")];

const markup = (onboardingTarget?: boolean, sources: ScannedSource[] = SOURCES) =>
  renderToStaticMarkup(
    <SourceList
      sources={sources}
      configuredSourceNames={new Set()}
      importedFileNames={new Map()}
      onSelectSource={vi.fn()}
      onboardingTarget={onboardingTarget}
    />,
  );

/** The source cards, in order: each is a button. */
const cards = (html: string) => html.split("<button").slice(1);

describe("SourceList — getting-started target (#398)", () => {
  it("highlights the first card of the list, and only it", () => {
    const html = markup(true);
    expect(html.split(HIGHLIGHT).length - 1).toBe(1);
    const [first, ...others] = cards(html);
    expect(first).toContain(HIGHLIGHT);
    expect(first).toContain(`data-onboarding-target="${SOURCE_CARD_TARGET}"`);
    expect(first).toContain("Desjardins");
    expect(others).toHaveLength(2);
    for (const card of others) expect(card).not.toContain("data-onboarding");
  });

  it("highlights the only card of a one-source list", () => {
    expect(markup(true, [source("Desjardins")]).split(HIGHLIGHT).length - 1).toBe(1);
  });

  it("highlights nothing without the property", () => {
    expect(markup()).not.toContain("data-onboarding");
    expect(markup(false)).not.toContain("data-onboarding");
  });
});