import { describe, it, expect, afterEach } from "vitest";
import {
  renderWithProviders as render,
  screen,
  cleanup,
  within,
} from "../utils/test-utils";
import { fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom/vitest";
import { ConflictManagementScreen } from "../../app/(app)/create/screens/card/ConflictManagementScreen";

afterEach(() => {
  cleanup();
});

describe("ConflictManagementScreen", () => {
  it("opens section fields editable without Customize", async () => {
    render(<ConflictManagementScreen />);
    fireEvent.click(
      screen.getAllByRole("button", {
        name: /Peer Mediation: Trained members/,
      })[0],
    );
    const dialog = await screen.findByRole("dialog");
    const fields = within(dialog).getAllByRole("textbox");
    expect(fields.length).toBeGreaterThan(0);
    for (const field of fields) {
      expect(field).toBeEnabled();
    }
    expect(
      within(dialog).queryByRole("button", { name: "Remove" }),
    ).not.toBeInTheDocument();
    fireEvent.click(
      within(dialog).getByRole("button", { name: "More options" }),
    );
    expect(
      screen.getByRole("menuitem", { name: "Customize" }),
    ).toBeInTheDocument();
  });
});