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

// Mock data
import titles from '../../mocks/data/titles.json';
const mockItem: Title = titles[0] as Title;
const mockShowItem: Title = titles.find((item) => item.objectType === "show") as Title;

// Mock onTitleSelectionChange function
const mockOnTitleSelectionChange = vi.fn();

describe("TitleControls Component", () => {
  it("renders season and episode selectors for a TV show", async () => {
    render(
      <TitleControls
        titleSelection={{
          id: mockShowItem.justwatchId,
          objectType: "show",
          meta: mockShowItem,
        }}
        onTitleSelectionChange={mockOnTitleSelectionChange}
      />
    );

    const seasonSelector = screen.getByLabelText("Season");
    const episodeSelector = screen.getByLabelText("Episode");

    expect(seasonSelector).toBeInTheDocument();
    expect(episodeSelector).toBeInTheDocument();
  });

  it("does not render season and episode selectors for a movie", async () => {
    render(
      <TitleControls
        titleSelection={{
          id: mockItem.justwatchId,
          objectType: "movie",
          meta: mockItem,
        }}
        onTitleSelectionChange={mockOnTitleSelectionChange}
      />
    );

    const seasonSelector = screen.queryByLabelText("Season");
    const episodeSelector = screen.queryByLabelText("Episode");

    expect(seasonSelector).not.toBeInTheDocument();
    expect(episodeSelector).not.toBeInTheDocument();
  });

  it("calls onTitleSelectionChange when a season is selected", async () => {
    render(
      <TitleControls
        titleSelection={{
          id: mockShowItem.justwatchId,
          objectType: "show",
          meta: mockShowItem,
        }}
        onTitleSelectionChange={mockOnTitleSelectionChange}
      />
    );

    const seasonSelector = screen.getByLabelText("Season");
    fireEvent.change(seasonSelector, { target: { value: "2" } });

    expect(mockOnTitleSelectionChange).toHaveBeenCalledWith({
      id: mockShowItem.justwatchId,
      objectType: "show",
      meta: mockShowItem,
      seasonNumber: 2,
      episodeNumber: 1,
    });
  });

  it("calls onTitleSelectionChange when an episode is selected", async () => {
    render(
      <TitleControls
        titleSelection={{
          id: mockShowItem.justwatchId,
          objectType: "show",
          meta: mockShowItem,
          seasonNumber: 1,
        }}
        onTitleSelectionChange={mockOnTitleSelectionChange}
      />
    );

    const episodeSelector = screen.getByLabelText("Episode");
    fireEvent.change(episodeSelector, { target: { value: "5" } });

    expect(mockOnTitleSelectionChange).toHaveBeenCalledWith({
      id: mockShowItem.justwatchId,
      objectType: "show",
      meta: mockShowItem,
      seasonNumber: 1,
      episodeNumber: 5,
    });
  });

  it("renders help text when no title is selected", async () => {
    render(
      <TitleControls
        titleSelection={undefined}
        onTitleSelectionChange={mockOnTitleSelectionChange}
      />
    );

    const helpText = screen.getByText("Search for a title or id (imdb, justwatch, tmdb)");
    expect(helpText).toBeInTheDocument();
  });

  it("renders help text when a title is selected", async () => {
    render(
      <TitleControls
        titleSelection={{
          id: mockItem.justwatchId,
          objectType: "movie",
          meta: mockItem,
        }}
        onTitleSelectionChange={mockOnTitleSelectionChange}
      />
    );

    const helpText = screen.getByText(mockItem.title);
    expect(helpText).toBeInTheDocument();
  });
});