import type { Meta, StoryObj } from '@storybook/vue3'
import FdsButtonDownload from './FdsButtonDownload.vue'

const meta: Meta<typeof FdsButtonDownload> = {
  title: 'FDS/Buttons/FdsButtonDownload',
  component: FdsButtonDownload,
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: {
        transform: (_code: string, ctx: { args?: Record<string, unknown> }) => {
          const a = (ctx.args || {}) as Record<string, unknown>
          const attrs: string[] = []
          const push = (s: string) => attrs.push(s)
          if (typeof a.text === 'string') push(`text="${a.text}"`)
          if (typeof a.iconPos === 'string' && a.iconPos !== 'left') push(`icon-pos="${a.iconPos}"`)
          if (a.loading) push(':loading="true"')
          if (a.disabled) push(':disabled="true"')
          if (typeof a.href === 'string' && a.href) push(`href="${a.href}"`)
          const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
          return `<FdsButtonDownload${attrsStr} />`
        },
      },
    },
  },
  argTypes: {
    text: {
      control: 'text',
      description: 'Button text',
    },
    href: {
      control: 'text',
      description: 'Link URL',
    },
    loading: {
      control: 'boolean',
      description: 'Show loading spinner',
    },
  },
  args: {
    text: 'Download',
    href: '#',
    loading: false,
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args: Story['args']) => ({
    components: { FdsButtonDownload },
    setup() {
      return { args }
    },
    template: '<FdsButtonDownload v-bind="args" />',
  }),
  args: {
    text: 'Download',
    href: '#',
  },
}

export const WithText: Story = {
  render: (args: Story['args']) => ({
    components: { FdsButtonDownload },
    setup() {
      return { args }
    },
    template: '<FdsButtonDownload v-bind="args" />',
  }),
  args: {
    text: 'Download file',
    href: '/download.pdf',
  },
}

export const Loading: Story = {
  render: (args: Story['args']) => ({
    components: { FdsButtonDownload },
    setup() {
      return { args }
    },
    template: '<FdsButtonDownload v-bind="args" />',
  }),
  args: {
    text: 'Download',
    href: '#',
    loading: true,
  },
}

export const Disabled: Story = {
  render: (args: Story['args']) => ({
    components: { FdsButtonDownload },
    setup() {
      return { args }
    },
    template: '<FdsButtonDownload v-bind="args" disabled />',
  }),
  args: {
    text: 'Download',
    href: '#',
  },
}