import type { Meta, StoryObj } from "@storybook/react"
import { Contact } from "./contact"

const meta: Meta<typeof Contact> = {
  title: "Widgets/Support/Contact",
  component: Contact,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    variant: {
      control: "radio",
      options: ["popover", "modal"],
    },
    side: {
      control: "radio",
      options: ["top", "bottom", "left", "right"],
    },
    showName: { control: "boolean" },
    showEmail: { control: "boolean" },
    showCompanyName: { control: "boolean" },
    showCompanySize: { control: "boolean" },
    showTopic: { control: "boolean" },
    showMessage: { control: "boolean" },
    showAdditionalInfo: { control: "boolean" },
    requireName: { control: "boolean" },
    requireEmail: { control: "boolean" },
    requireCompanyName: { control: "boolean" },
    requireCompanySize: { control: "boolean" },
    requireTopic: { control: "boolean" },
    requireMessage: { control: "boolean" },
    requireAdditionalInfo: { control: "boolean" },
  },
}

export default meta
type Story = StoryObj<typeof Contact>

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

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

export const WithBusinessFields: Story = {
  args: {
    showCompanyName: true,
    showCompanySize: true,
    rows: [
      ["name", "email"],
      ["companyName", "companySize"],
      ["topic"],
      ["message"],
    ],
    onSubmit: async (data) => {
      console.log("Contact submitted:", data)
      await new Promise((resolve) => setTimeout(resolve, 500))
    },
  },
}