import { describe, it, expect, vi } from "vitest";
import * as React from "react";
import { render, screen, fireEvent } from "../../tests/test-utils";
import { TitleDialog } from "./TitleDialog";
import { Title } from "@/types";
import userEvent from "@testing-library/user-event";

// Mock data
import titles from '../../mocks/data/titles.json';
const mockItem: Title = titles[0] as Title;

describe("TitleDialog Component", () => {
  it("renders the modal when isOpen is true", async () => {
    const onClose = vi.fn();
    const onConfirm = vi.fn();

    render(
      <TitleDialog isOpen={true} onClose={onClose} onConfirm={onConfirm} />
    );

    const modal = screen.getByRole("dialog");
    expect(modal).toBeInTheDocument();
    expect(modal).toHaveTextContent("Select a title");
  });

  it("does not render the modal when isOpen is false", async () => {
    const onClose = vi.fn();
    const onConfirm = vi.fn();

    render(
      <TitleDialog isOpen={false} onClose={onClose} onConfirm={onConfirm} />
    );

    const modal = screen.queryByRole("dialog");
    expect(modal).not.toBeInTheDocument();
  });

  it("focuses the input field when the modal opens", async () => {
    const onClose = vi.fn();
    const onConfirm = vi.fn();

    render(
      <TitleDialog isOpen={true} onClose={onClose} onConfirm={onConfirm} />
    );

    const input = screen.getByRole("textbox");
    expect(input).toHaveFocus();
  });

  it("calls onClose when the cancel button is clicked", async () => {
    const onClose = vi.fn();
    const onConfirm = vi.fn();

    render(
      <TitleDialog isOpen={true} onClose={onClose} onConfirm={onConfirm} />
    );

    const cancelButton = screen.getByText("Cancel");
    fireEvent.click(cancelButton);

    expect(onClose).toHaveBeenCalled();
  });

  it("calls onConfirm with the title selection when the insert button is clicked", async () => {
    const onClose = vi.fn();
    const onConfirm = vi.fn();

    const query = mockItem.title;

    render(
      <TitleDialog isOpen={true} onClose={onClose} onConfirm={onConfirm} />
    );

    // Simulate selecting a title
    const input = screen.getByRole("textbox");

    userEvent.type(input, query);

    const listbox = await screen.findByRole("list");
    expect(listbox).toBeInTheDocument();

    const suggestion = await screen.findByText(query, { selector: "mark" }, { timeout: 3000 });
    expect(suggestion).toBeInTheDocument();

    await userEvent.click(suggestion);

    // Simulate clicking the insert button
    const insertButton = screen.getByText("Confirm");
    fireEvent.click(insertButton);

    expect(onConfirm).toHaveBeenCalledWith({
      id: String(mockItem.justwatchId),
      objectType: mockItem.objectType,
      meta: mockItem,
    });
  });
});