import type { Meta, StoryObj } from "@storybook/vue3-vite"
import type { BuilderSchema } from "@/stores/formBuilderStore"
import FormBuilder, { type SuggestedField } from "./FormBuilder.vue"
import { componentDoc } from "@/lib/storybook"

const seededSchema = {
  rootCardId: "root",
  cards: {
    root: {
      id: "root",
      cardType: "element-list",
      elementList: ["first-name", "email", "active"],
    },
  },
  elements: {
    "first-name": {
      id: "first-name",
      type: "input.text",
      name: "first_name",
      label: "First name",
      required: true,
    },
    email: {
      id: "email",
      type: "input.email",
      name: "email",
      label: "Email",
      required: true,
      placeholder: "you@example.com",
    },
    active: {
      id: "active",
      type: "boolean.switch",
      name: "is_active",
      label: "Active",
    },
  },
} as unknown as BuilderSchema

const meta = {
  title: "Elements/Builder/FormBuilder",
  component: FormBuilder,
  tags: ["autodocs"],
  args: {
    label: "Form definition",
  },
  parameters: {
    layout: "fullscreen",
    ...componentDoc("FormBuilder", { barrel: "builder" }),
  },
} satisfies Meta<typeof FormBuilder>

export default meta
type Story = StoryObj<typeof meta>

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

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

export const ReadOnlyPreview: Story = {
  name: "Read-only label",
  args: {
    label: "Read-only example",
    modelValue: seededSchema,
  },
}

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

const suggestedFields: SuggestedField[] = [
  { type: "input.text", name: "first_name", label: "First name", defaultValue: "" },
  { type: "input.text", name: "last_name", label: "Last name", defaultValue: "" },
  { type: "input.email", name: "email", label: "Email", defaultValue: "" },
  { type: "input.tel", name: "phone", label: "Phone", defaultValue: "" },
  { type: "input.text", name: "company", label: "Company", defaultValue: "" },
  { type: "boolean.switch", name: "is_active", label: "Active", defaultValue: true },
]

export const SuggestedFields: Story = {
  name: "suggestedFields",
  args: {
    suggestedFields,
  },
}

export const SuggestedFieldsWithSomeAlreadyAdded: Story = {
  name: "suggestedFields (some already in form)",
  args: {
    suggestedFields,
    modelValue: seededSchema,
  },
}

export const RootTabsContainer: Story = {
  name: "rootTabsContainer",
  args: {
    rootTabsContainer: true,
  },
}

export const Snippets: Story = {
  name: "enableSnippets",
  args: {
    enableSnippets: true,
    openAllSections: true,
    modelValue: {
      rootCardId: "root",
      cards: {
        root: { id: "root", cardType: "element-list", title: "", elementList: ["snippet#addr"] },
      },
      elements: {},
      snippets: {
        addr: {
          rootCardId: "addr-root",
          label: "Address block",
          cards: {
            "addr-root": {
              id: "addr-root",
              cardType: "element-list",
              title: "Address block",
              elementList: ["addr-street", "addr-city"],
            },
          },
          elements: {
            "addr-street": { id: "addr-street", type: "input.text", name: "street", label: "Street" },
            "addr-city": { id: "addr-city", type: "input.text", name: "city", label: "City" },
          },
        },
      },
    } as never,
  },
}

export const AdvancedCardLists: Story = {
  name: "advancedCardLists",
  args: {
    rootCardListLabel: "Main form",

    advancedCardLists: {
      settings: { label: "Advanced Settings", style: "tab-container" },
      formTemplate: { label: "Form Template", style: "tab-container" },
      meta: { label: "Metadata", cardType: "element-list" },
    },

    rootTabsContainer: true,
    openAllSections: true
  },
}
