import type { Meta, StoryObj } from "@storybook/vue3-vite"
import type { Connector } from "@/definitions/shared/connector"
import IntegrationConnectorPicker from "./IntegrationConnectorPicker.vue"
import { componentDoc } from "@/lib/storybook"

const CONNECTORS: Connector[] = [
  {
    id: "slack-1",
    label: "Slack — Eng",
    icon: "slack",
    type: "slack",
    status: "connected",
  },
  {
    id: "sf-1",
    label: "Salesforce Prod",
    icon: "cloud",
    type: "salesforce",
    status: "disconnected",
  },
  {
    id: "gh-1",
    label: "GitHub",
    icon: "github",
    type: "github",
    status: "error",
  },
  {
    id: "stripe-1",
    label: "Stripe Live",
    icon: "credit-card",
    type: "stripe",
    status: "connected",
  },
]

function mockLoad(delay = 400): () => Promise<Connector[]> {
  return () =>
    new Promise((resolve) => {
      setTimeout(() => resolve(CONNECTORS), delay)
    })
}

function mockLoadError(): () => Promise<Connector[]> {
  return () =>
    new Promise((_, reject) => {
      setTimeout(() => reject(new Error("simulated failure")), 400)
    })
}

function mockConnect(delay = 500): (id: string) => Promise<void> {
  return () =>
    new Promise((resolve) => {
      setTimeout(resolve, delay)
    })
}

const meta = {
  title: "Elements/Picker/IntegrationConnectorPicker",
  component: IntegrationConnectorPicker,
  tags: ["autodocs"],
  args: {
    label: "Connector",
    onLoadConnectors: mockLoad(),
  },
  parameters: componentDoc("IntegrationConnectorPicker", { barrel: "picker" }),
  decorators: [
    () => ({
      template: '<div class="w-96 p-4"><story /></div>',
    }),
  ],
} satisfies Meta<typeof IntegrationConnectorPicker>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { label: "Connector", onLoadConnectors: mockLoad() },
}

export const WithSelectedValue: Story = {
  args: {
    label: "Connector",
    modelValue: "slack-1",
    onLoadConnectors: mockLoad(),
  },
}

export const WithErrors: Story = {
  args: {
    label: "Connector",
    onLoadConnectors: mockLoadError(),
    errorText: "Could not load connectors. Please retry.",
  },
}

export const Disabled: Story = {
  args: { label: "Disabled", disabled: true, onLoadConnectors: mockLoad() },
}

export const WithOnConnect: Story = {
  args: {
    label: "Connector",
    onLoadConnectors: mockLoad(),
    onConnect: mockConnect(),
    helpText: "Non-connected rows expose a Connect / Reconnect action.",
  },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { IntegrationConnectorPicker },
    setup() {
      return {
        load: mockLoad(),
        loadFail: mockLoadError(),
        connect: mockConnect(),
      }
    },
    template: `
      <div class="flex flex-col gap-4 max-w-md">
        <IntegrationConnectorPicker label="Default" :on-load-connectors="load" />
        <IntegrationConnectorPicker
          label="With selected value"
          model-value="slack-1"
          :on-load-connectors="load"
        />
        <IntegrationConnectorPicker
          label="With onConnect"
          :on-load-connectors="load"
          :on-connect="connect"
        />
        <IntegrationConnectorPicker
          label="Error path"
          :on-load-connectors="loadFail"
        />
        <IntegrationConnectorPicker
          label="Disabled"
          disabled
          :on-load-connectors="load"
        />
      </div>
    `,
  }),
}
