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

const stickerTransform = (
  _src: string,
  storyContext: { args?: { variant?: string; bullet?: boolean; default?: string } },
) => {
  const args = storyContext?.args || {}
  const attrs = []

  if (args.variant && args.variant !== 'blue') attrs.push(`variant="${args.variant}"`)
  if (args.bullet) attrs.push(`:bullet="true"`)

  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
  const content = args.default || ''
  return `<FdsSticker${attrsStr}>${content}</FdsSticker>`
}

const meta: Meta<typeof FdsSticker> = {
  title: 'FDS/FdsSticker',
  component: FdsSticker,
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: {
        transform: stickerTransform,
      },
    },
  },
  argTypes: {
    variant: {
      control: { type: 'radio' },
      options: ['blue', 'gray', 'green', 'red', 'yellow', 't_blue'],
      description: 'Set the color variant of the sticker',
    },
    bullet: {
      control: { type: 'boolean' },
      description: 'Set the layout to bullet style',
    },
    default: { control: { type: 'text' } },
  },
  args: {
    variant: 'blue',
    bullet: false,
    default: 'Stick it!',
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args: Story['args']) => ({
    components: { FdsSticker },
    setup: () => ({ args }),
    template: `<FdsSticker v-bind="args">{{ args.default }}</FdsSticker>`,
  }),
  args: {
    variant: 'blue',
    default: 'Stick it!',
  },
}

export const Alert: Story = {
  render: () => ({
    components: { FdsSticker },
    template: `
      <FdsSticker variant="yellow">Alert</FdsSticker>
    `,
  }),
}

export const Fail: Story = {
  render: () => ({
    components: { FdsSticker },
    template: `
      <FdsSticker variant="red">Failed</FdsSticker>
    `,
  }),
}

export const Success: Story = {
  render: () => ({
    components: { FdsSticker },
    template: `
      <FdsSticker variant="green">Success</FdsSticker>
    `,
  }),
}

export const Gray: Story = {
  render: () => ({
    components: { FdsSticker },
    template: `
      <FdsSticker variant="gray">Info</FdsSticker>
    `,
  }),
}

export const TransparentBlue: Story = {
  render: () => ({
    components: { FdsSticker },
    template: `
      <FdsSticker variant="t_blue">Transparent</FdsSticker>
    `,
  }),
}

export const BulletBlue: Story = {
  render: () => ({
    components: { FdsSticker },
    template: `
      <FdsSticker variant="blue" bullet>Bullet point</FdsSticker>
    `,
  }),
}

export const BulletGreen: Story = {
  render: () => ({
    components: { FdsSticker },
    template: `
      <FdsSticker variant="green" bullet>Success bullet</FdsSticker>
    `,
  }),
}

export const AllVariants: Story = {
  render: () => ({
    components: { FdsSticker },
    template: `
      <div class="space-y-4">
        <div class="space-x-2">
          <FdsSticker variant="blue">Blue</FdsSticker>
          <FdsSticker variant="green">Green</FdsSticker>
          <FdsSticker variant="red">Red</FdsSticker>
          <FdsSticker variant="yellow">Yellow</FdsSticker>
          <FdsSticker variant="gray">Gray</FdsSticker>
          <FdsSticker variant="t_blue">Transparent Blue</FdsSticker>
        </div>
        <div class="space-x-2">
          <FdsSticker variant="blue" bullet>Blue Bullet</FdsSticker>
          <FdsSticker variant="green" bullet>Green Bullet</FdsSticker>
          <FdsSticker variant="red" bullet>Red Bullet</FdsSticker>
          <FdsSticker variant="yellow" bullet>Yellow Bullet</FdsSticker>
          <FdsSticker variant="gray" bullet>Gray Bullet</FdsSticker>
          <FdsSticker variant="t_blue" bullet>Transparent Blue Bullet</FdsSticker>
        </div>
      </div>
    `,
  }),
}