import React from "react";
import { IframeEmbed } from "./index";

import { render, screen, fireEvent } from "@testing-library/react";

describe("IframeEmbed", () => {
  it("renders nothing when iframeUrl is not provided", () => {
    const { container } = render(<IframeEmbed iframeUrl="" />);
    expect(container.querySelector("section")).not.toBeInTheDocument();
  });

  it("renders the iframe when iframeUrl is provided", () => {
    render(<IframeEmbed iframeUrl="https://example.com/embed" />);
    const iframe = screen.getByTitle("Iframe Embed");
    expect(iframe).toBeInTheDocument();
    expect(iframe).toHaveAttribute("src", "https://example.com/embed");
  });

  it("applies anchorId to the section", () => {
    const { container } = render(
      <IframeEmbed iframeUrl="https://example.com/embed" anchorId="embed-section" />
    );
    expect(container.querySelector("#embed-section")).toBeInTheDocument();
  });

  it("applies background color when backgroundColor is provided", () => {
    render(
      <IframeEmbed iframeUrl="https://example.com/embed" backgroundColor="green" />
    );
    const iframe = screen.getByTitle("Iframe Embed");
    expect(iframe.style.background).toBe("rgb(36, 167, 106)");
  });

  it("applies transparent background when backgroundColor is not provided", () => {
    render(<IframeEmbed iframeUrl="https://example.com/embed" />);
    const iframe = screen.getByTitle("Iframe Embed");
    expect(iframe.style.background).toBe("transparent");
  });

  it("updates iframe height on postMessage event", () => {
    render(<IframeEmbed iframeUrl="https://example.com/embed" />);
    const iframe = screen.getByTitle("Iframe Embed");

    fireEvent(
      window,
      new MessageEvent("message", { data: { iframeHeight: 300 } })
    );

    expect(iframe.style.height).toBe("300px");
  });

  it("removes message listener on unmount", () => {
    const removeEventListenerSpy = jest.spyOn(window, "removeEventListener");
    const { unmount } = render(<IframeEmbed iframeUrl="https://example.com/embed" />);

    unmount();

    expect(removeEventListenerSpy).toHaveBeenCalledWith(
      "message",
      expect.any(Function)
    );
    removeEventListenerSpy.mockRestore();
  });

  it("does not attach message listener when iframeUrl is empty", () => {
    const addEventListenerSpy = jest.spyOn(window, "addEventListener");
    render(<IframeEmbed iframeUrl="" />);

    expect(addEventListenerSpy).not.toHaveBeenCalledWith(
      "message",
      expect.any(Function)
    );
    addEventListenerSpy.mockRestore();
  });

  it("applies initial height when height prop is provided", () => {
    render(<IframeEmbed iframeUrl="https://example.com/embed" height={200} />);
    const iframe = screen.getByTitle("Iframe Embed");
    expect(iframe.style.height).toBe("200px");
  });

  it("ignores non-numeric iframeHeight values", () => {
    render(<IframeEmbed iframeUrl="https://example.com/embed" />);
    const iframe = screen.getByTitle("Iframe Embed");

    fireEvent(window, new MessageEvent("message", { data: { iframeHeight: "abc" } }));
    expect(iframe.style.height).toBe("");
  });

  it("ignores iframeHeight exceeding max cap", () => {
    render(<IframeEmbed iframeUrl="https://example.com/embed" />);
    const iframe = screen.getByTitle("Iframe Embed");

    fireEvent(window, new MessageEvent("message", { data: { iframeHeight: 99999 } }));
    expect(iframe.style.height).toBe("");
  });

  it("ignores negative iframeHeight values", () => {
    render(<IframeEmbed iframeUrl="https://example.com/embed" />);
    const iframe = screen.getByTitle("Iframe Embed");

    fireEvent(window, new MessageEvent("message", { data: { iframeHeight: -100 } }));
    expect(iframe.style.height).toBe("");
  });
});