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

const meta: Meta<typeof FdsButtonMinor> = {
  title: 'FDS/Buttons/FdsButtonMinor',
  component: FdsButtonMinor,
  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.icon === 'string') push(`icon="${a.icon}"`)
          if (typeof a.iconPos === 'string' && a.iconPos !== 'left') push(`icon-pos="${a.iconPos}"`)
          if (a.invert) push(':invert="true"')
          if (a.loading) push(':loading="true"')
          if (a.disabled) push(':disabled="true"')
          if (a.block) push(':block="true"')
          if (typeof a.as === 'string' && a.as !== 'button') push(`as="${a.as}"`)
          if (typeof a.type === 'string' && a.type !== 'button') push(`type="${a.type}"`)
          if (typeof a.href === 'string' && a.href) push(`href="${a.href}"`)
          const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
          return `<FdsButtonMinor${attrsStr} />`
        },
      },
    },
  },
  argTypes: {
    text: { control: { type: 'text' } },
    icon: { control: { type: 'select' }, options: Object.keys(icons) },
    iconPos: { control: { type: 'inline-radio' }, options: ['left', 'right'] },
    invert: { control: { type: 'boolean' } },
    loading: { control: { type: 'boolean' } },
    disabled: { control: { type: 'boolean' } },
    block: { control: { type: 'boolean' } },
    textSelection: { control: { type: 'boolean' } },
    as: { control: { type: 'select' }, options: ['button', 'a', 'router-link'] },
    type: { control: { type: 'select' }, options: ['button', 'submit', 'reset'] },
    href: { control: { type: 'text' } },
  },
  args: {
    text: 'Minor',
    invert: false,
    loading: false,
    disabled: false,
    block: false,
    textSelection: false,
    icon: undefined,
    iconPos: 'left',
    as: 'button',
    type: 'button',
  },
}

export default meta
type Story = StoryObj<typeof meta>

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