import React from "react";
import "@testing-library/jest-dom";
import { fireEvent, render, screen, within } from "@testing-library/react";
import JobTrackerThemeProvider from "./ThemeProvider";
import { I18nProvider } from "./i18n/I18nProvider";
import AppShell from "./layout/AppShell";

jest.mock("@mui/material/useMediaQuery", () => ({ __esModule: true, default: () => true }));
afterEach(() => localStorage.clear());

test.each([
  ["en", "User", "commit abc1234", "abc1234"],
  ["nb", "Bruker", "revisjon abc1234", "abc1234"],
  ["en", "User", "Application version 2.4.1", undefined],
  ["nb", "Bruker", "Applikasjonsversjon 2.4.1", undefined],
] as const)("%s mobile account menu localises the supplied build metadata (%s)", (language, user, expected, commit) => {
  localStorage.setItem("uiLanguage", language);
  render(<JobTrackerThemeProvider preference="light" systemPrefersDark={false}><I18nProvider>
    <AppShell pageTitle="Page" breadcrumbs={[]} pathname="/dashboard" nav={[]} navBottom={[]}
      drawerOpen={false} onNavigate={jest.fn()} onToggleDrawer={jest.fn()} user={{ userName: "Sample" }}
      buildMetadata={{ version: "2.4.1", commitSha: commit }}><div>Sample content</div></AppShell>
  </I18nProvider></JobTrackerThemeProvider>);
  fireEvent.click(screen.getByRole("button", { name: user }));
  expect(screen.getByRole("menu")).toHaveTextContent(expected);
  expect(within(screen.getByRole("menu")).getByText(/2\.4\.1/)).toBeVisible();
});