import { describe, it, expect, vi } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react";
import { ProductPageGallery } from "@/components/productpage/ProductPageGallery";
import React from "react";

// Mock Image
vi.mock("next/image", () => ({
  default: ({ src, alt, priority, sizes, onMouseEnter }: any) => (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={src}
      alt={alt}
      data-priority={priority?.toString()}
      data-sizes={sizes}
      onMouseEnter={onMouseEnter}
    />
  ),
}));

// Mock Carousel components
vi.mock("@/components/ui/carousel", () => ({
  Carousel: ({ children }: any) => <div>{children}</div>,
  CarouselContent: ({ children }: any) => <div>{children}</div>,
  CarouselItem: ({ children }: any) => <div>{children}</div>,
  CarouselNext: () => <button>Next</button>,
  CarouselPrevious: () => <button>Previous</button>,
}));

describe("ProductPageGallery", () => {
  const images = ["/image1.jpg", "/image2.jpg"];

  it("renders the main image with priority and sizes attributes (LCP optimization)", () => {
    render(<ProductPageGallery images={images} />);

    const mainImage = screen.getByAltText("Hauptbild");
    expect(mainImage).toBeInTheDocument();

    // Verify LCP optimization props
    expect(mainImage).toHaveAttribute("data-priority", "true");
    expect(mainImage).toHaveAttribute(
      "data-sizes",
      "(max-width: 768px) 100vw, 520px"
    );
  });

  it("initializes with the first image and updates on thumbnail interaction", () => {
    render(<ProductPageGallery images={images} />);

    let mainImage = screen.getByAltText("Hauptbild");
    expect(mainImage).toHaveAttribute("src", "/image1.jpg");

    // Interaction with second thumbnail
    const thumb2 = screen.getByLabelText("Produktbild 2 anzeigen");

    // Hover
    fireEvent.mouseEnter(thumb2);
    expect(screen.getByAltText("Hauptbild")).toHaveAttribute(
      "src",
      "/image2.jpg"
    );

    // Focus
    const thumb1 = screen.getByLabelText("Produktbild 1 anzeigen");
    fireEvent.focus(thumb1);
    expect(screen.getByAltText("Hauptbild")).toHaveAttribute(
      "src",
      "/image1.jpg"
    );

    // Click
    fireEvent.click(thumb2);
    expect(screen.getByAltText("Hauptbild")).toHaveAttribute(
      "src",
      "/image2.jpg"
    );
  });
});