import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import React from "react";
import * as v from "valibot";
import { afterEach, describe, expect, it, vi } from "vitest";
import { Form } from "./form";
import { SubmitButton } from "./submit_button";
afterEach(cleanup);
describe("SubmitButton Component", () => {
    it("should render correctly", () => {
        const schema = v.object({});
        render(<Form schema={schema}>
                <SubmitButton>Submit</SubmitButton>
            </Form>);
        const button = screen.getByRole("button", { name: "Submit" });
        expect(button).toBeTruthy();
        expect(button.type).toBe("submit");
    });
    // Testing loading state requires triggering form submission which is async.
    // We can try to mock useFormStatus if we could, but it's internal.
    // Or we can trigger a submit that takes time.
    it("should show loading state when form is pending", async () => {
        const schema = v.object({});
        let resolveSubmit;
        const onSubmit = vi.fn(() => new Promise((resolve) => {
            resolveSubmit = resolve;
        }));
        render(<Form schema={schema} onSubmit={onSubmit}>
                <SubmitButton>Submit</SubmitButton>
            </Form>);
        const button = screen.getByRole("button", { name: "Submit" });
        fireEvent.click(button);
        // Wait for next tick for state to update
        await new Promise(r => setTimeout(r, 0));
        // Button should be disabled/loading
        expect(button.disabled).toBe(true);
        // Finish submit
        if (resolveSubmit)
            resolveSubmit();
        await new Promise(r => setTimeout(r, 0));
        // Should be enabled again
        expect(button.disabled).toBe(false);
    });
});