import { describe, expect, test, vi } from "vitest";
import { screen } from "@testing-library/react";
import { userEvent } from "@testing-library/user-event";
import { PlaylistCard } from "../../../components/playlist/PlaylistCard.tsx";
import { makePlaylist } from "../../fixtures.ts";
import { currentPath, renderWithContexts } from "../../render.tsx";
import { markPlaylistVisited } from "../../../utils/shared/visited.ts";

describe("PlaylistCard", () => {
  test("title, badge, owner, count; clicking opens it and marks it seen", async () => {
    const user = userEvent.setup();
    const p = makePlaylist({
      id: "p1",
      slug: "mix",
      title: "Mix",
      ownerUsername: "ann",
      dumpCount: 1,
      isPublic: false,
      description: "Tunes",
    });
    const { container } = renderWithContexts(
      <ul>
        <PlaylistCard playlist={p} />
      </ul>,
    );
    expect(screen.getByRole("link", { name: /Mix/ })).toHaveAttribute(
      "href",
      "/playlists/mix",
    );
    expect(screen.getByText("private")).toBeInTheDocument();
    expect(screen.getByRole("link", { name: "@ann" })).toHaveAttribute(
      "href",
      "/users/ann",
    );
    expect(screen.getByText("1 dump")).toBeInTheDocument();
    expect(screen.getByText("Tunes")).toBeInTheDocument();
    await user.click(container.querySelector(".playlist-card-inner")!);
    expect(currentPath()).toBe("/playlists/mix");
  });

  test("the owner doesn't see their own name, or an unread dot", () => {
    const p = makePlaylist({ ownerUsername: "me", createdAt: new Date() });
    const { container } = renderWithContexts(
      <ul>
        <PlaylistCard playlist={p} isOwner />
      </ul>,
    );
    expect(screen.queryByText("@me")).not.toBeInTheDocument();
    expect(container.querySelector(".unread-dot")).toBeNull();
  });

  test("a new playlist has a dot until visited", () => {
    const p = makePlaylist({ id: "fresh", createdAt: new Date() });
    const first = renderWithContexts(
      <ul>
        <PlaylistCard playlist={p} />
      </ul>,
    );
    expect(first.container.querySelector(".unread-dot")).not.toBeNull();
    first.unmount();
    markPlaylistVisited("fresh");
    const again = renderWithContexts(
      <ul>
        <PlaylistCard playlist={p} />
      </ul>,
    );
    expect(again.container.querySelector(".unread-dot")).toBeNull();
  });

  test("delete doesn't open the playlist", async () => {
    const onDelete = vi.fn();
    const user = userEvent.setup();
    renderWithContexts(
      <ul>
        <PlaylistCard playlist={makePlaylist()} onDelete={onDelete} />
      </ul>,
    );
    await user.click(screen.getByRole("button", { name: "Delete playlist" }));
    expect(onDelete).toHaveBeenCalled();
    expect(currentPath()).toBe("/");
  });
});