import React from "react";
import "@testing-library/jest-dom";
import { fireEvent, render, screen } from "@testing-library/react";
import { CssVarsProvider } from "@mui/material/styles";

import { I18nProvider } from "./i18n/I18nProvider";
import AppShell from "./layout/AppShell";
import { getTheme } from "./theme";

test("notification bell exposes its unread count and keyboard-accessible action", () => {
  const open = jest.fn();
  render(
    <CssVarsProvider theme={getTheme("light") as any} defaultMode="light">
      <I18nProvider>
        <AppShell
          pageTitle="Dashboard"
          breadcrumbs={["Home"]}
          pathname="/dashboard"
          nav={[]}
          navBottom={[]}
          onNavigate={() => undefined}
          onToggleDrawer={() => undefined}
          drawerOpen={false}
          notificationsCount={3}
          onOpenNotifications={open}
        >
          <div>Content</div>
        </AppShell>
      </I18nProvider>
    </CssVarsProvider>,
  );

  const bell = screen.getByRole("button", { name: "Notifications" });
  expect(screen.getByText("3")).toBeInTheDocument();
  fireEvent.click(bell);
  expect(open).toHaveBeenCalledTimes(1);
});
