// @vitest-environment jsdom
//
// The rail's Year section: a year from the picker is a range of one (both ends), the picker shows a
// range of one as its selected year, and the two range fields carry a name of their own.
import { describe, it, expect, vi, afterEach } from "vitest";
import { render, cleanup, screen, fireEvent } from "@testing-library/react";

vi.mock("react-i18next", async (importOriginal) => {
  const actual = await importOriginal<typeof import("react-i18next")>();
  return {
    ...actual,
    useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
  };
});
vi.mock("./plexContext", () => ({
  usePlex: () => ({}),
  usePlexActions: () => ({ setPlaylistOpen: vi.fn() }),
}));

import { FacetsStatus, PlexYearFilter } from "./PlexSidebar";
import { EMPTY_PLEX_FILTERS, type PlexFacets } from "../../lib/api";

afterEach(cleanup);

const FACETS = {
  years: [
    { year: 2001, count: 4 },
    { year: 1999, count: 2 },
  ],
  year_min: 1999,
  year_max: 2001,
} as unknown as PlexFacets;

describe("the Plex rail's Year section", () => {
  it("picks a year as a range of one, and clears both ends again", () => {
    const patch = vi.fn();
    const { rerender } = render(
      <PlexYearFilter filters={EMPTY_PLEX_FILTERS} facets={FACETS} patch={patch} />,
    );
    fireEvent.click(screen.getByRole("button", { name: /1999/ }));
    expect(patch).toHaveBeenLastCalledWith({ yearMin: 1999, yearMax: 1999 });

    rerender(
      <PlexYearFilter
        filters={{ ...EMPTY_PLEX_FILTERS, yearMin: 1999, yearMax: 1999 }}
        facets={FACETS}
        patch={patch}
      />,
    );
    const on = screen.getByRole("button", { pressed: true });
    expect(on.textContent).toContain("1999");
    fireEvent.click(on);
    expect(patch).toHaveBeenLastCalledWith({ yearMin: null, yearMax: null });
  });

  it("a wider range selects no year", () => {
    render(
      <PlexYearFilter
        filters={{ ...EMPTY_PLEX_FILTERS, yearMin: 1999, yearMax: 2001 }}
        facets={FACETS}
        patch={() => {}}
      />,
    );
    expect(screen.queryByRole("button", { pressed: true })).toBeNull();
  });

  it("says the facets are loading, or failed with a way to try again, rather than showing none", () => {
    const retry = vi.fn();
    const { rerender } = render(<FacetsStatus failed={false} onRetry={retry} />);
    expect(screen.getByRole("status").textContent).toBe("common.loading");
    rerender(<FacetsStatus failed onRetry={retry} />);
    expect(screen.getByRole("alert").textContent).toContain("common.loadError");
    fireEvent.click(screen.getByRole("button", { name: "common.retry" }));
    expect(retry).toHaveBeenCalledOnce();
  });

  it("names the range fields", () => {
    render(<PlexYearFilter filters={EMPTY_PLEX_FILTERS} facets={FACETS} patch={() => {}} />);
    expect(screen.getByRole("spinbutton", { name: "plex.filter.yearFrom" })).toBeTruthy();
    expect(screen.getByRole("spinbutton", { name: "plex.filter.yearTo" })).toBeTruthy();
  });
});