import React from "react";
import { render, waitFor } from "@testing-library/react";

import CvTemplateThumbnail from "./components/CvTemplateThumbnail";
import { cvBuilderApi, CvTheme } from "./cvBuilder";
import { I18nProvider } from "./i18n/I18nProvider";

const theme = (id: string, layout: CvTheme["layout"], swatches: string[]): CvTheme => ({
  id,
  name: id,
  category: "Test",
  description: "",
  layout,
  accent: swatches[0],
  photoShape: "none",
  supportsIcons: false,
  atsFriendly: true,
  requiresPro: false,
  available: true,
  swatches,
});

test("template thumbnails retain distinct server-rendered samples in noninteractive sandboxed frames", async () => {
  const preview = jest.spyOn(cvBuilderApi, "themePreview").mockImplementation(async id => ({ html: `<html><body>${id} synthetic sample</body></html>` } as any));
  const minimal = render(<I18nProvider><CvTemplateThumbnail theme={theme("minimal", "single", ["#111827", "#ffffff", "#ffffff"])} /></I18nProvider>);
  await waitFor(() => expect(minimal.container.querySelector("iframe")?.srcdoc).toContain("minimal synthetic sample"));
  const minimalMarkup = minimal.container.querySelector("iframe")!.srcdoc;
  minimal.unmount();

  const nordic = render(<I18nProvider><CvTemplateThumbnail theme={theme("nordic", "sidebar-right", ["#3b6ea5", "#eef3f8", "#ffffff"])} /></I18nProvider>);

  await waitFor(() => expect(nordic.container.querySelector("iframe")?.srcdoc).toContain("nordic synthetic sample"));
  const frame = nordic.container.querySelector("iframe")!;
  expect(frame.getAttribute("sandbox")).toBe("");
  expect(frame.tabIndex).toBe(-1);
  expect(frame.srcdoc).not.toBe(minimalMarkup);
  expect(preview.mock.calls.map(([id]) => id)).toEqual(["minimal", "nordic"]);
  preview.mockRestore();
});