import { describe, expect, it } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { DashboardFilterBar } from "../../components/DashboardFilterBar";
import { DashboardFilterProvider, useDashboardFilters } from "../DashboardFilterProvider";

function DashboardFilterContent(): React.JSX.Element {
  const { timeRange, originFilter, setTimeRange, setOriginFilter } = useDashboardFilters();
  return (
    <>
      <DashboardFilterBar
        timeRange={timeRange}
        onTimeRangeChange={setTimeRange}
        originFilter={originFilter}
        onOriginFilterChange={setOriginFilter}
      />
      <div data-testid="dashboard-filters">{`${timeRange}-${originFilter}`}</div>
    </>
  );
}

describe("DashboardFilterProvider", () => {
  it("provides filter state to DashboardFilterBar and updates when the user clicks", async () => {
    const user = userEvent.setup();

    render(
      <DashboardFilterProvider>
        <DashboardFilterContent />
      </DashboardFilterProvider>,
    );

    expect(screen.getByTestId("dashboard-filters")).toHaveTextContent("24h-all");

    await user.click(screen.getByRole("button", { name: /Last 7 days/i }));
    expect(screen.getByTestId("dashboard-filters")).toHaveTextContent("7d-all");

    await user.click(screen.getByRole("button", { name: /Blocklist/i }));
    expect(screen.getByTestId("dashboard-filters")).toHaveTextContent("7d-blocklist");
  });
});
