import type { Meta, StoryObj } from "@storybook/vue3-vite"
import type { CardElement } from "@/definitions/elements"
import type { InputElement } from "@/definitions/elements/InputElement"
import ElementListCard from "./ElementListCard.vue"
import { componentDoc } from "@/lib/storybook"

const firstName: InputElement = {
  id: "first-name",
  type: "input.text",
  name: "first_name",
  label: "First name",
  placeholder: "Jane",
} as InputElement

const lastName: InputElement = {
  id: "last-name",
  type: "input.text",
  name: "last_name",
  label: "Last name",
  placeholder: "Doe",
} as InputElement

const sampleElements: CardElement[] = [firstName, lastName]

const meta = {
  title: "Cards/ElementListCard",
  component: ElementListCard,
  tags: ["autodocs"],
  parameters: componentDoc("ElementListCard", { barrel: "cards" }),
  args: {
    elements: sampleElements,
    item: {},
    showCard: true,
  },
} satisfies Meta<typeof ElementListCard>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {},
}

export const WithTitle: Story = {
  args: {
    title: "Personal details",
    subtitle: "How should we address you?",
  },
}

export const WithoutChrome: Story = {
  args: {
    showCard: false,
    title: "No chrome",
  },
}

export const Showcase: Story = {
  args: {
    title: "Showcase",
    subtitle: "Several stacked inputs",
    gutterY: "1.25rem",
  },
}
