import assert from "node:assert/strict";
import { test } from "node:test";

import { inventoryKeys } from "@metis/assets/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { createInstance } from "i18next";
import type { ReactNode } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { I18nextProvider } from "react-i18next";

import { accessKeys } from "../access/access-api";
import { companiesEnglish, companiesSpanish } from "../i18n";

import { mailKeys } from "./mail-api";
import { MailConfigurationForm } from "./mail-configuration-form";
import { MailConfigurationsPage } from "./mail-configurations-page";

const company = {
  id: "0199b200-0000-7000-8000-000000000001",
  name: "Empresa test",
  active: true,
  people: [],
  contacts: [],
  sites: [],
  departments: [],
  assignments: [],
};
async function render(language: string, node: ReactNode) {
  const i18n = createInstance();
  await i18n.init({
    lng: language,
    resources: { es: { companies: companiesSpanish }, en: { companies: companiesEnglish } },
  });
  const client = new QueryClient({
    defaultOptions: { queries: { retry: false, staleTime: Number.POSITIVE_INFINITY } },
  });
  client.setQueryData(mailKeys.company(company.id), { configurations: [] });
  client.setQueryData(accessKeys.scope(company.id), { items: [], reviews: [], coverage: [] });
  client.setQueryData(inventoryKeys.company(company.id), {
    assets: [],
    relationships: [],
    workstations: [],
  });
  try {
    return renderToStaticMarkup(
      <I18nextProvider i18n={i18n}>
        <QueryClientProvider client={client}>{node}</QueryClientProvider>
      </I18nextProvider>
    );
  } finally {
    client.clear();
  }
}
test("correo: listado traducido, alta en cabecera y formularios ocultos", async () => {
  for (const language of ["es", "en"]) {
    const html = await render(
      language,
      <MailConfigurationsPage company={company} csrfToken="test" />
    );
    assert.equal(html.includes("<form"), false);
    assert.ok(html.includes(language === "es" ? "Configurar correo" : "Configure email"));
    assert.ok(
      html.includes(language === "es" ? "Todavía no hay correos" : "No email configurations")
    );
  }
});
test("correo: selectores reutilizables con altas y ayuda inmediatamente antes de guardar", async () => {
  const html = await render(
    "es",
    <MailConfigurationForm company={company} csrfToken="test" onSaved={() => undefined} />
  );
  for (const label of ["Nueva persona", "Nueva cuenta", "Nuevo dispositivo"]) {
    assert.ok(html.includes(`aria-label="${label}"`));
  }
  assert.ok(html.includes('role="combobox"'));
  assert.ok(html.includes("Dirección de correo"));
  assert.ok(html.includes("IMAP"));
  assert.ok(html.indexOf("¿Para qué sirve esta configuración?") < html.indexOf("Guardar"));
  assert.ok(html.includes("varias cuentas por persona"));
  assert.equal(html.includes('type="password"'), false);
});