import { fireEvent, screen } from "@testing-library/react";
import { MainNavigation, SideNavigation, UserMenuPopover } from "@ui/components/NavigationBar";
import { renderWithProviders } from "../utils/testHelpers";

describe("NavigationBar", () => {
  describe("SideNavigation", () => {
    it("renders the side navigation with correct initial state", () => {
      renderWithProviders(<SideNavigation isMobileMenuOpen={false} />);

      // Check if the logo is present
      expect(screen.getByAltText("Logo XTablo")).toBeInTheDocument();

      // Check if the title is present
      expect(screen.getByText("XTablo Dev")).toBeInTheDocument();
    });

    it("collapses and expands when the collapse button is clicked", () => {
      renderWithProviders(<SideNavigation isMobileMenuOpen={false} />);

      // Find and click the collapse button
      const collapseButton = screen.getByRole("button", { name: /collapse/i });
      fireEvent.click(collapseButton);

      // Check if the navigation is collapsed
      const navigation = screen.getByRole("navigation", {
        name: "Main navigation",
      });
      expect(navigation).toHaveClass("w-16");

      // Click again to expand
      fireEvent.click(collapseButton);
      expect(navigation).toHaveClass("w-48");
    });
  });

  describe("MainNavigation", () => {
    it("renders navigation links", () => {
      renderWithProviders(<MainNavigation isCollapsed={false} />);

      // Check if the main navigation is rendered
      const navigation = screen.getByRole("navigation", { name: "Primary navigation" });
      expect(navigation).toBeInTheDocument();
    });
  });

  describe("UserMenuPopover", () => {
    it("renders the user menu button", () => {
      renderWithProviders(<UserMenuPopover isCollapsed={false} />);

      // Check if the user menu trigger is present
      const triggerButton = screen.getByRole("button");
      expect(triggerButton).toBeInTheDocument();
    });
  });
});
