import type { Meta, StoryObj } from "@storybook/react"
import { Toaster } from "@mdxui/primitives/sonner"
import { ReportIssue } from "./report-issue"

const meta: Meta<typeof ReportIssue> = {
  title: "Widgets/Support/ReportIssue",
  component: ReportIssue,
  decorators: [
    (Story) => (
      <>
        <Story />
        <Toaster />
      </>
    ),
  ],
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    variant: {
      control: "radio",
      options: ["popover", "modal"],
    },
    side: {
      control: "radio",
      options: ["top", "bottom", "left", "right"],
    },
    defaultTab: {
      control: "radio",
      options: ["question", "feedback", "bug"],
    },
  },
}

export default meta
type Story = StoryObj<typeof ReportIssue>

export const Default: Story = {
  args: {
    onSubmit: async (data) => {
      console.log("Report submitted:", data)
      await new Promise((resolve) => setTimeout(resolve, 500))
    },
  },
}

export const Popover: Story = {
  args: {
    variant: "popover",
    onSubmit: async (data) => {
      console.log("Report submitted:", data)
      await new Promise((resolve) => setTimeout(resolve, 500))
    },
  },
}

export const WithPrefilledUser: Story = {
  args: {
    user: {
      id: "user-123",
      name: "Jane Smith",
      email: "jane@example.com",
    },
    onSubmit: async (data) => {
      console.log("Report submitted:", data)
      await new Promise((resolve) => setTimeout(resolve, 500))
    },
  },
}

export const BugTabActive: Story = {
  args: {
    defaultTab: "bug",
    onSubmit: async (data) => {
      console.log("Report submitted:", data)
      await new Promise((resolve) => setTimeout(resolve, 500))
    },
  },
}