import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { InputDeviceProvider } from "../../utils/hooks/use-input-device";

import { Text } from "../text";
import { Tabs } from "./index";

const mockTabs = [
  {
    index: "items",
    tabName: "Items",
    content: <Text>This is the Items tab</Text>,
  },
  {
    index: "collections",
    tabName: "Collections",
    content: <Text>This is the Collections tab</Text>,
  },
  {
    index: "projects",
    tabName: "Projects",
    content: <Text>This is the Projects tab</Text>,
  },
  {
    index: "users",
    tabName: "Users",
    content: <Text>This is the Users tab</Text>,
  },
];

describe("Tabs", () => {
  it("renders", () => {
    render(
      <InputDeviceProvider>
        <Tabs ariaLabel="browse" defaultTab="items" tabs={mockTabs} />
      </InputDeviceProvider>
    );
    expect(screen.getByText("This is the Items tab")).toBeInTheDocument();
  });

  it("switches tabs on trigger click", async () => {
    const user = userEvent.setup();
    render(
      <InputDeviceProvider>
        <Tabs ariaLabel="browse" defaultTab="items" tabs={mockTabs} />
      </InputDeviceProvider>
    );
    const CollectionsTrigger = screen.getByText("Collections");
    await user.click(CollectionsTrigger);

    expect(screen.getByText("This is the Collections tab")).toBeInTheDocument();
  });

  it("switches tabs on keyboard", async () => {
    const user = userEvent.setup();
    render(
      <InputDeviceProvider>
        <Tabs ariaLabel="browse" defaultTab="items" tabs={mockTabs} />
      </InputDeviceProvider>
    );
    await user.keyboard("{tab}{arrowright}");

    expect(screen.getByText("This is the Collections tab")).toBeInTheDocument();
  });
});