import { describe, it, expect } from "vitest";
import * as React from "react";
import { render, screen } from "../../tests/test-utils";
import type { Title } from "../../types";
import { TitleInfo } from "./TitleInfo";

import titles from '../../mocks/data/titles.json';

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

describe("TitleInfo Component", () => {
  it("renders the title, type, and release year", async () => {
    render(<TitleInfo item={mockItem} />);

    const title = screen.getByText(mockItem.title);
    const objectType = screen.getByText(mockItem.objectType);
    const releaseYear = screen.getByText(String(mockItem.originalReleaseYear!));

    expect(title).toBeInTheDocument();
    expect(objectType).toBeInTheDocument();
    expect(releaseYear).toBeInTheDocument();
  });

  it("highlights text based on the highlight prop", async () => {
    const query = mockItem.title.substring(0, 3); // Get the first 3 characters of the title
    render(<TitleInfo item={mockItem} highlight={query} />);

    // Find the highlighted text wrapped in a <mark> element
    const highlightedText = screen.getByText(query);
    expect(highlightedText.tagName).toBe("MARK"); // Ensure the text is wrapped in a <mark> element
    expect(highlightedText).toHaveTextContent(query); // Ensure the content is correct
  });

  it("renders details when the details prop is true", async () => {
    render(<TitleInfo item={mockItem} details={true} />);

    const directorLabel = screen.getByText("Director:");
    const director = screen.getByText(mockItem.director!);

    expect(directorLabel).toBeInTheDocument();
    expect(director).toBeInTheDocument();
  });

  it("renders the ID when provided", async () => {
    render(<TitleInfo item={mockItem} idType="imdb" highlight={mockItem.imdbId} />);

    const id = screen.getByText(mockItem.imdbId!);
    expect(id).toBeInTheDocument();
  });

  it("renders the badge for the title type", async () => {
    render(<TitleInfo item={mockItem} />);

    const objectType = screen.getByText("movie");
    expect(objectType).toBeInTheDocument();
  });
});