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

const meta: Meta<typeof FdsButtonCopy> = {
  title: 'FDS/Buttons/FdsButtonCopy',
  component: FdsButtonCopy,
  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.value === 'string') push(`value="${a.value}"`)
          if (typeof a.targetId === 'string') push(`target-id="${a.targetId}"`)
          if (typeof a.text === 'string') push(`text="${a.text}"`)
          if (typeof a.copiedText === 'string') push(`copied-text="${a.copiedText}"`)
          if (typeof a.timeoutMs === 'number' && a.timeoutMs !== 1500) push(`:timeout-ms="${a.timeoutMs}"`)
          if (a.disabled) push(':disabled="true"')
          const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
          return `<FdsButtonCopy${attrsStr} />`
        },
      },
    },
  },
  argTypes: {
    value: { control: { type: 'text' } },
    targetId: { control: { type: 'text' } },
    text: { control: { type: 'text' } },
    copiedText: { control: { type: 'text' } },
    timeoutMs: { control: { type: 'number' } },
    disabled: { control: { type: 'boolean' } },
  },
  args: {
    value: 'Text att kopiera',
    text: 'Kopiera',
    copiedText: 'Kopierat!',
    timeoutMs: 800,
    disabled: false,
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args: Story['args']) => ({
    components: { FdsButtonCopy },
    setup: () => ({ args }),
    template: '<FdsButtonCopy v-bind="args" />',
  }),
}