import { render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";

import { MarqueeSettingsForm } from "@/components/admin/marquee-settings-form";
import { buildDefaultMarqueeSettings } from "@/lib/marquee-settings";

describe("MarqueeSettingsForm", () => {
  it("renders a textarea per row with german default values", () => {
    const settings = buildDefaultMarqueeSettings();
    settings.locales.de.row1 = "First row value";
    render(<MarqueeSettingsForm action={vi.fn()} initialSettings={settings} />);

    for (const name of ["row1-de", "row2-de", "row3-de", "row4-de"]) {
      const field = document.querySelector(`textarea[name="${name}"]`);
      expect(field).not.toBeNull();
    }
    expect((document.querySelector('textarea[name="row1-de"]') as HTMLTextAreaElement).value).toBe(
      "First row value",
    );
  });

  it("wires the server action onto the form and renders a submit button", () => {
    const action = vi.fn();
    render(<MarqueeSettingsForm action={action} initialSettings={buildDefaultMarqueeSettings()} />);
    expect(document.querySelector("form#marquee-settings-form")).not.toBeNull();
    expect(screen.getByRole("button", { name: /save marquee/i })).toBeInTheDocument();
  });
});