import type { Meta, StoryObj } from "@storybook/vue3-vite"
import type { DependencyListBuilderSchema } from "@/stores/dependencyListBuilderStore"
import DependencyListBuilder from "./DependencyListBuilder.vue"

const seededSchema: DependencyListBuilderSchema = {
  rules: [
    {
      id: "rule-1",
      name: "Show 'State' when country is US",
      enabled: true,
      conditions: [
        { field: "country", operator: "equals", value: "US" },
      ],
      conditionsLogic: "AND",
      actions: [{ type: "show", target: "state" }],
    },
    {
      id: "rule-2",
      name: "Require 'Phone' for VIPs",
      enabled: true,
      conditions: [
        { field: "tier", operator: "equals", value: "vip" },
      ],
      conditionsLogic: "AND",
      actions: [{ type: "require", target: "phone" }],
    },
    {
      id: "rule-3",
      name: "Hide 'Promo' when not opted in",
      enabled: false,
      conditions: [{ field: "opted_in", operator: "is_falsy" }],
      conditionsLogic: "AND",
      actions: [{ type: "hide", target: "promo_section" }],
    },
  ],
}

const meta = {
  title: "Elements/Builder/DependencyListBuilder",
  component: DependencyListBuilder,
  tags: ["autodocs"],
  args: {
    label: "Field dependencies",
  },
  parameters: {
    layout: "fullscreen",
    docs: {
      description: {
        component:
          "```ts\nimport { DependencyListBuilder } from \"@gxp-dev/mod-ui/builder\"\n```\n\nVisual editor for a list of conditional rules ('when X happens then Y') used to drive dynamic form behavior.",
      },
    },
  },
} satisfies Meta<typeof DependencyListBuilder>

export default meta
type Story = StoryObj<typeof meta>

export const Empty: Story = {
  name: "Empty (default)",
  args: {},
}

export const WithSeededSchema: Story = {
  name: "Pre-populated rules",
  args: {
    modelValue: seededSchema,
  },
}

export const Showcase: Story = {
  args: {
    modelValue: seededSchema,
  },
}
