import { describe, it, expect, vi } from "vitest";
import { screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom/vitest";
import { renderWithProviders } from "../utils/test-utils";
import {
  componentTestSuite,
  type ComponentTestSuiteConfig,
} from "../utils/componentTestSuite";
import ModalFooter from "../../app/components/modals/ModalFooter";

type Props = React.ComponentProps<typeof ModalFooter>;

const config: ComponentTestSuiteConfig<Props> = {
  component: ModalFooter,
  name: "ModalFooter",
  props: {
    showBackButton: true,
    showNextButton: true,
    onBack: vi.fn(),
    onNext: vi.fn(),
    currentStep: 2,
    totalSteps: 4,
  } as Props,
  primaryRole: "button",
  testCases: {
    renders: true,
    accessibility: true,
  },
};

describe("ModalFooter", () => {
  componentTestSuite<Props>(config);

  it("renders Cancel left of Next in the trailing group", () => {
    const onCancel = vi.fn();
    const onNext = vi.fn();
    renderWithProviders(
      <ModalFooter
        showBackButton={false}
        showCancelButton
        showNextButton
        onCancel={onCancel}
        onNext={onNext}
        cancelButtonText="Cancel"
        nextButtonText="Add to Rule"
        stepper={false}
      />,
    );
    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
    expect(onCancel).toHaveBeenCalledTimes(1);
    expect(onNext).not.toHaveBeenCalled();
    fireEvent.click(screen.getByRole("button", { name: "Add to Rule" }));
    expect(onNext).toHaveBeenCalledTimes(1);
  });
});