import type { Meta, StoryObj } from '@storybook/vue3'
import icons from '../../../assets/icons'
import FdsButtonIcon from './FdsButtonIcon.vue'

const meta: Meta<typeof FdsButtonIcon> = {
  title: 'FDS/Buttons/FdsButtonIcon',
  component: FdsButtonIcon,
  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.icon === 'string') push(`icon="${a.icon}"`)
          if (typeof a.size === 'number' && a.size !== 24) push(`size="${a.size}"`)
          if (a.loading) push(':loading="true"')
          if (a.disabled) push(':disabled="true"')
          if (typeof a.type === 'string' && a.type !== 'button') push(`type="${a.type}"`)
          if (typeof a['aria-label'] === 'string') push(`aria-label="${a['aria-label']}"`)
          const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
          return `<FdsButtonIcon${attrsStr} />`
        },
      },
    },
  },
  argTypes: {
    icon: { control: { type: 'select' }, options: Object.keys(icons) },
    disabled: { control: { type: 'boolean' } },
    loading: { control: { type: 'boolean' } },
    type: { control: { type: 'select' }, options: ['button', 'submit', 'reset'] },
    size: { control: { type: 'number' } },
  },
  args: {
    icon: 'information',
    size: 24,
    disabled: false,
    loading: false,
    type: 'button',
  },
}

export default meta
type Story = StoryObj<typeof meta>

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