import React from "react";
import "@testing-library/jest-dom";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { MemoryRouter } from "react-router-dom";
import { api } from "./api";
import CompaniesTable from "./components/CompaniesTable";
import { I18nProvider, useI18n } from "./i18n/I18nProvider";
import { ToastProvider, useToast } from "./toast";

function Actions() {
  const { toast } = useToast();
  const { setLanguage } = useI18n();
  return <><button onClick={() => toast("Saved", "success")}>Show feedback</button><button onClick={() => setLanguage("nb")}>Change language</button></>;
}

test("feedback and locale changes translate company presentation without reloading company data", async () => {
  localStorage.clear();
  (api.get as jest.Mock).mockResolvedValue({ data: [{ id: 3, name: "Acme" }] });
  render(<ToastProvider><I18nProvider><MemoryRouter><Actions /><CompaniesTable /></MemoryRouter></I18nProvider></ToastProvider>);
  await screen.findByRole("button", { name: "Edit: Acme" });
  const reads = () => (api.get as jest.Mock).mock.calls.filter(([url]) => url === "/companies").length;
  expect(reads()).toBe(1);
  fireEvent.click(screen.getByRole("button", { name: "Show feedback" }));
  expect(await screen.findByRole("alert")).toHaveTextContent("Saved");
  expect(reads()).toBe(1);
  fireEvent.click(screen.getByRole("button", { name: "Change language" }));
  await screen.findByRole("button", { name: "Rediger: Acme" });
  await waitFor(() => expect(reads()).toBe(1));
});