import { describe, expect, it, vi } from "vitest";
import { render, screen } from "~/test-utils.js";
import userEvent from "@testing-library/user-event";
import { FilterBar } from "./FilterBar.js";

describe("FilterBar", () => {
  it("renders children", () => {
    render(
      <FilterBar>
        <span>Filter content</span>
      </FilterBar>,
    );
    expect(screen.getByText("Filter content")).toBeInTheDocument();
  });

  it("does not show clear button when no active filters", () => {
    render(
      <FilterBar hasActiveFilters={false} onClearFilters={vi.fn()}>
        <span>Filters</span>
      </FilterBar>,
    );
    expect(screen.queryByText("Clear filters")).not.toBeInTheDocument();
  });

  it("does not show clear button when onClearFilters is not provided", () => {
    render(
      <FilterBar hasActiveFilters>
        <span>Filters</span>
      </FilterBar>,
    );
    expect(screen.queryByText("Clear filters")).not.toBeInTheDocument();
  });

  it("shows clear button when hasActiveFilters and onClearFilters are both provided", () => {
    render(
      <FilterBar hasActiveFilters onClearFilters={vi.fn()}>
        <span>Filters</span>
      </FilterBar>,
    );
    expect(screen.getByText("Clear filters")).toBeInTheDocument();
  });

  it("calls onClearFilters when clear button is clicked", async () => {
    const onClear = vi.fn();
    render(
      <FilterBar hasActiveFilters onClearFilters={onClear}>
        <span>Filters</span>
      </FilterBar>,
    );
    await userEvent.click(screen.getByText("Clear filters"));
    expect(onClear).toHaveBeenCalledOnce();
  });

  it("has role='search' on the container", () => {
    render(
      <FilterBar>
        <span>Filters</span>
      </FilterBar>,
    );
    expect(screen.getByRole("search")).toBeInTheDocument();
  });

  it("has aria-label='Filters' on the container", () => {
    render(
      <FilterBar>
        <span>Filters</span>
      </FilterBar>,
    );
    expect(screen.getByRole("search")).toHaveAttribute("aria-label", "Filters");
  });
});
