import React from "react";
import { YoutubeEmbed } from "./youtube-embed";

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

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

describe("YoutubeEmbed", () => {
  it("renders iframe with extracted video id from watch URL", () => {
    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />);
    const iframe = screen.getByTitle("Embedded youtube");
    expect(iframe.getAttribute("src")).toBe(
      "https://www.youtube.com/embed/dQw4w9WgXcQ"
    );
  });

  it("extracts id from youtu.be short URL", () => {
    render(<YoutubeEmbed link="https://youtu.be/dQw4w9WgXcQ" />);
    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toContain(
      "/embed/dQw4w9WgXcQ"
    );
  });

  it("extracts id from embed URL", () => {
    render(<YoutubeEmbed link="https://www.youtube.com/embed/dQw4w9WgXcQ" />);
    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toContain(
      "/embed/dQw4w9WgXcQ"
    );
  });

  it("returns empty embedId for invalid URL", () => {
    render(<YoutubeEmbed link="https://example.com/notavideo" />);
    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
      "https://www.youtube.com/embed/"
    );
  });

  it("returns empty embedId when link is empty", () => {
    render(<YoutubeEmbed link="" />);
    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
      "https://www.youtube.com/embed/"
    );
  });

  it("returns empty embedId when link is undefined", () => {
    render(<YoutubeEmbed link={undefined} />);
    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
      "https://www.youtube.com/embed/"
    );
  });

  it("appends autoplay param when autoplay is true", () => {
    render(
      <YoutubeEmbed
        link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
        autoplay={true}
      />
    );
    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
      "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1"
    );
  });

  it("does not append autoplay param when autoplay is false", () => {
    render(
      <YoutubeEmbed
        link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
        autoplay={false}
      />
    );
    expect(
      screen.getByTitle("Embedded youtube").getAttribute("src")
    ).not.toContain("autoplay");
  });

  it("applies containerClassName", () => {
    const { container } = render(
      <YoutubeEmbed
        link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
        containerClassName="extra"
      />
    );
    expect(container.firstElementChild?.className).toContain("extra");
  });

  it("has correct iframe attributes", () => {
    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />);
    const iframe = screen.getByTitle("Embedded youtube");
    expect(iframe).toHaveAttribute(
      "allow",
      "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    );
    expect(iframe).toHaveAttribute("allowFullScreen");
  });

  it("returns empty embedId when match length is not 11", () => {
    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=short" />);
    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
      "https://www.youtube.com/embed/"
    );
  });
});