import { describe, it, expect } from "vitest";
import * as React from "react";
import { render, screen, waitFor } from "../../tests/test-utils";
import { WidgetPreview, WidgetPreviewProps } from "./WidgetPreview";
import type { Theme, Title, TitleIdType, TitleObjectType } from '../../types';
import titles from '../../mocks/data/titles.json';

const mockItem: Title = titles[0] as Title;

const widgetProps: WidgetPreviewProps = {
  urlPath: mockItem.fullPath,
  id: String(mockItem.justwatchId),
  idType: "justwatch" as TitleIdType,
  objectType: "movie" as TitleObjectType,
  theme: "light" as Theme,
  scale: 1,
  brandedLink: true,
};

describe("WidgetPreview Component", () => {
  it("renders the iframe with the correct src and style", async () => {
    render(<WidgetPreview {...widgetProps}/>);

    const iframe = await screen.findByTitle("JustWatch Widget");

    expect(iframe).toBeInTheDocument();
    expect(iframe).toHaveAttribute(
      "src",
      expect.stringContaining("your-preview-url")
    );
    // expect(iframe).toHaveStyle("height: ''");
  });

  it("updates the iframe height when a resize message is received", async () => {
    render(<WidgetPreview {...widgetProps}/>);

    const iframe = screen.getByTitle("JustWatch Widget");
    // Simulate a resize message from the iframe
    const resizeMessage = {
      type: "resize",
      sender: "jw_widget",
      cssHeight: "500px",
    };
    window.postMessage(resizeMessage, "*");

    // Wait for the iframe height to update
    await waitFor(() => expect(iframe).toHaveStyle("height: 500px"));
  });
});