import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import { EditorPanel } from "./editor-panel";

const sampleContent = `---
title: "Hello World"
description: "A sample MDX document"
---

# Welcome to the Editor

This is a sample MDX document that you can edit.

## Features

- **Real-time preview** - See your changes instantly
- **Monaco Editor** - VS Code-like editing experience
- **Keyboard shortcuts** - ⌘S to save, ⌘I to toggle

## Code Example

\`\`\`tsx
function Button({ children }: { children: React.ReactNode }) {
  return (
    <button className="px-4 py-2 bg-blue-500 text-white rounded">
      {children}
    </button>
  )
}
\`\`\`

## Try It Out

Click the pencil button or press **⌘I** to open the editor.

> "The best way to learn is by doing."
`;

const saveAction = fn();
const mockSave = async (content: string) => {
	saveAction(content.slice(0, 100) + "...");
	await new Promise((resolve) => setTimeout(resolve, 500));
};

const meta: Meta<typeof EditorPanel> = {
	title: "Widgets/Editor/EditorPanel",
	component: EditorPanel,
	parameters: {
		layout: "fullscreen",
	},
	tags: ["autodocs"],
	argTypes: {
		path: { control: "text" },
		initialContent: { control: "text" },
		shortcut: { control: "text" },
	},
	decorators: [
		(Story) => (
			<div className="min-h-screen bg-background flex items-center justify-center">
				<div className="flex flex-col items-center gap-4 text-center px-4">
					<h1 className="text-2xl font-semibold">EditorPanel Story</h1>
					<p className="text-muted-foreground text-sm max-w-md">
						Click the pencil icon in the corner or press{" "}
						<kbd className="px-1.5 py-0.5 rounded border bg-muted text-xs">
							⌘I
						</kbd>{" "}
						to open the editor panel.
					</p>
				</div>
				<Story />
			</div>
		),
	],
};

export default meta;
type Story = StoryObj<typeof meta>;

/**
 * Default configuration with sample MDX content.
 * Click the pencil icon in the bottom-right corner to open.
 */
export const Default: Story = {
	args: {
		path: "/docs/sample",
		initialContent: sampleContent,
		onSave: mockSave,
	},
};

/**
 * Custom keyboard shortcut to toggle the editor.
 */
export const CustomShortcut: Story = {
	args: {
		path: "/docs/sample",
		initialContent: sampleContent,
		onSave: mockSave,
		shortcut: "meta+e",
	},
};