import type { Meta, StoryObj } from "@storybook/react-vite";

import { Button, type ButtonProps } from "@mantine/core";
import { expect, fn, userEvent, within } from "storybook/test";

type ButtonStoryArguments = ButtonProps & { onClick: () => void };

const meta = {
	args: {
		children: "Выполнить пример",
		disabled: false,
		loading: false,
		onClick: fn(),
		variant: "filled",
	},
	argTypes: {
		children: { control: "text" },
		disabled: { control: "boolean" },
		loading: { control: "boolean" },
		onClick: { control: false },
		variant: { control: "select", options: ["filled", "default", "subtle"] },
	},
	component: Button,
	parameters: {
		docs: {
			description: {
				component:
					"Прямой Mantine Button с общей темой WealthLedger, без wrapper. Filled — основное действие; default — вторичное действие/retry; subtle — малозаметное вспомогательное действие. Radius md, primary blue и keyboard focus приходят из темы. Дайте кнопке доступное имя; loading означает mutation, disabled — недоступное действие. Loading/disabled не исполняют callback. Actions и interaction проверяют локальный callback, не API recovery.",
			},
		},
	},
	tags: ["autodocs"],
	title: "Design System/Components/Button",
} satisfies Meta<ButtonStoryArguments>;

export default meta;

type Story = StoryObj<ButtonStoryArguments>;

export const Primary: Story = {
	name: "Основное действие",
	play: async ({ args, canvasElement }) => {
		const button = within(canvasElement).getByRole("button", {
			name: typeof args.children === "string" ? args.children : undefined,
		});

		button.focus();
		await expect(button).toHaveFocus();
		await userEvent.keyboard("{Enter}");
		await expect(args.onClick).toHaveBeenCalled();
	},
};
export const Secondary: Story = {
	args: { variant: "default" },
	name: "Вторичное действие",
};
export const Subtle: Story = {
	args: { variant: "subtle" },
	name: "Вспомогательное действие",
};
export const Loading: Story = { args: { loading: true }, name: "Выполнение" };
export const Disabled: Story = { args: { disabled: true }, name: "Недоступно" };