import { fireEvent, render, screen } from "@testing-library/react";
import { expect, test, vi } from "vitest";
import { ResourceGroupSelectField } from "@/shared/ui/ResourceGroupSelectDrawer.jsx";

vi.mock("@/shared/ui/SideDrawer.jsx", () => ({
    SideDrawer({ children, drawerProps, onClose, open, title }) {
        if (!open) {
            return null;
        }
        return (
            <aside aria-label={title} data-z-index={drawerProps?.sx?.zIndex} role="dialog">
                <button type="button" onClick={onClose}>
                    关闭
                </button>
                {children}
            </aside>
        );
    },
}));

const groups = [
    {
        groupCode: "vip1_rewards",
        groupId: 1,
        items: [{ itemType: "resource", resource: { name: "VIP1 Avatar Frame" }, resourceId: 101 }],
        name: "VIP1 Rewards",
    },
];

test("resource group drawer stays above dialogs", () => {
    render(<ResourceGroupSelectField allowEmpty groups={groups} value="" />);

    fireEvent.click(screen.getByPlaceholderText("请选择资源组"));

    expect(screen.getByRole("dialog", { name: "选择资源组" })).toHaveAttribute("data-z-index", "1600");
    expect(screen.getByText("不配置")).toBeInTheDocument();
    expect(screen.getByText("VIP1 Rewards")).toBeInTheDocument();
});
