import React from "react";
import { ContentfulVideoEmbed } from "./contentful-video-embed";

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

jest.mock("@shared/utils", () => ({
  cx: (...args: any[]) => args.filter(Boolean).join(" "),
}));

describe("ContentfulVideoEmbed", () => {
  it("renders a video element with source, poster and accessible label", () => {
    const { container } = render(
      <ContentfulVideoEmbed
        videoAssetUrl="https://videos.ctfassets.net/space/asset/file/sample.mp4"
        videoAssetType="video/mp4"
        image="https://images.ctfassets.net/space/asset/file/poster.jpg"
        title="My accessible title"
        description="Fallback text"
      />
    );

    const video = container.querySelector("video");
    expect(video).toBeInTheDocument();
    expect(video).toHaveAttribute("aria-label", "My accessible title");
    expect(video).toHaveAttribute(
      "poster",
      "https://images.ctfassets.net/space/asset/file/poster.jpg"
    );
    const source = container.querySelector("source");
    expect(source).toHaveAttribute(
      "src",
      "https://videos.ctfassets.net/space/asset/file/sample.mp4"
    );
    expect(source).toHaveAttribute("type", "video/mp4");
    expect(container).toHaveTextContent("Fallback text");
  });

  it("defaults to video/mp4 and a default accessible label when not provided", () => {
    const { container } = render(
      <ContentfulVideoEmbed videoAssetUrl="https://videos.ctfassets.net/a/b/c/x.mp4" />
    );
    expect(container.querySelector("source")).toHaveAttribute(
      "type",
      "video/mp4"
    );
    expect(container.querySelector("video")).toHaveAttribute(
      "aria-label",
      "Embedded video"
    );
  });

  it("sets autoplay attribute when autoplay is true", () => {
    const { container } = render(
      <ContentfulVideoEmbed
        videoAssetUrl="https://videos.ctfassets.net/a/b/c/x.mp4"
        autoplay={true}
      />
    );
    expect(container.querySelector("video")).toHaveProperty("autoplay", true);
  });

  it("applies containerClassName", () => {
    const { container } = render(
      <ContentfulVideoEmbed
        videoAssetUrl="https://videos.ctfassets.net/a/b/c/x.mp4"
        containerClassName="custom"
      />
    );
    expect(container.firstElementChild?.className).toContain("custom");
  });

  it("renders null when videoAssetUrl is missing", () => {
    const { container } = render(<ContentfulVideoEmbed />);
    expect(container.innerHTML).toBe("");
  });
});