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

const blockLinkTransform = (
  _src: string,
  storyContext: {
    args?: {
      heading?: string
      icon?: string
      variant?: 'list' | 'link'
      disabled?: boolean
      href?: string
      interactive?: boolean
      default?: string
      as?: 'router-link' | 'a' | 'button'
      target?: string
      rel?: string
      download?: string
    }
  },
) => {
  const args = storyContext?.args || {}
  const attrs = []

  if (args.heading) attrs.push(`heading="${args.heading}"`)
  if (args.variant) attrs.push(`variant="${args.variant}"`)
  if (args.icon) attrs.push(`icon="${args.icon}"`)
  if (args.disabled) attrs.push(':disabled="true"')
  if (args.href) attrs.push(`href="${args.href}"`)
  if (!args.interactive) attrs.push(':interactive="false"')
  if (args.as && args.as !== 'router-link') attrs.push(`as="${args.as}"`)

  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
  const content = args.default ? `\n  <p>${args.default}</p>\n` : ''
  return `<FdsBlockLink${attrsStr}>${content}</FdsBlockLink>`
}

const meta = {
  title: 'FDS/Blocks/FdsBlockLink',
  component: FdsBlockLink as any,
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: {
        transform: blockLinkTransform,
      },
    },
  },
  argTypes: {
    heading: { control: { type: 'text' } },
    variant: { control: { type: 'select' }, options: ['list', 'link'] },
    disabled: { control: { type: 'boolean' } },
    download: { control: { type: 'text' } },
    href: { control: { type: 'text' } },
    target: { control: { type: 'select' }, options: ['', '_blank', '_self', '_parent', '_top'] },
    rel: { control: { type: 'text' } },
    icon: { control: { type: 'select' }, options: Object.keys(icons) },
    interactive: { control: { type: 'boolean' } },
    default: { control: { type: 'text' } },
    as: { control: { type: 'select' }, options: ['button', 'a', 'router-link'] },
  },
  args: {
    heading: 'Enter some text',
    variant: 'list',
    disabled: false,
    download: undefined,
    href: '/url',
    target: undefined,
    rel: undefined,
    icon: undefined,
    interactive: true,
    default: 'Nothing will happen',
    as: 'router-link',
  },
} satisfies Meta<any>

export default meta
type Story = StoryObj<any>

export const Default: Story = {
  render: (args: Story['args']) => ({
    components: { FdsBlockLink },
    setup: () => ({ args }),
    template: `<FdsBlockLink v-bind="args">{{ args.default }}</FdsBlockLink>`,
  }),
  args: {
    heading: 'Enter some text',
    default: 'Nothing will happen',
  },
}

export const WithIcon: Story = {
  render: () => ({
    components: { FdsBlockLink },
    template: `
      <FdsBlockLink variant="link" heading="Settings" icon="settings" href="/settings">
        <p>Click to go to settings page.</p>
      </FdsBlockLink>
    `,
  }),
}

export const WithSticker: Story = {
  render: () => ({
    components: { FdsBlockLink, FdsSticker },
    template: `
      <FdsBlockLink heading="New Feature" href="/feature">
        <p>Check out our latest feature!</p>
        <template #sticker>
          <FdsSticker variant="blue">New</FdsSticker>
        </template>
      </FdsBlockLink>
    `,
  }),
}

export const Disabled: Story = {
  render: () => ({
    components: { FdsBlockLink },
    template: `
      <FdsBlockLink heading="Disabled Block" disabled>
        <p>This block is disabled and cannot be interacted with.</p>
      </FdsBlockLink>
    `,
  }),
}

export const NonInteractive: Story = {
  render: () => ({
    components: { FdsBlockLink },
    template: `
      <FdsBlockLink heading="Information Only" :interactive="false">
        <p>This block is not interactive - it's just for display.</p>
      </FdsBlockLink>
    `,
  }),
}

export const ExternalLink: Story = {
  render: () => ({
    components: { FdsBlockLink },
    template: `
      <FdsBlockLink
        heading="External Link"
        href="https://example.com"
        target="_blank"
        rel="noreferrer noopener"
      >
        <p>This link opens in a new tab.</p>
      </FdsBlockLink>
    `,
  }),
}

export const Download: Story = {
  render: () => ({
    components: { FdsBlockLink },
    template: `
      <FdsBlockLink
        variant="link"
        heading="Download File"
        icon="download"
        href="/files/document.pdf"
        download="document.pdf"
      >
        <p>Click to download the PDF file.</p>
      </FdsBlockLink>
    `,
  }),
}