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

const blockAlertTransform = (
  _src: string,
  storyContext: {
    args?: {
      visible?: boolean
      heading?: string
      closeable?: boolean
      collapsable?: boolean
      expanded?: boolean
      default?: string
    }
  },
) => {
  const args = storyContext?.args || {}
  const attrs = []

  if (args.heading) attrs.push(`heading="${args.heading}"`)
  if (args.closeable) attrs.push(':closeable="true"')
  if (args.collapsable) attrs.push(':collapsable="true"')
  if (args.expanded) attrs.push(':expanded="true"')

  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
  let content = ''

  if (args.default) {
    content = `\n  <p>${args.default}</p>\n`
  }

  return `<FdsBlockAlert${attrsStr}>${content}</FdsBlockAlert>`
}

const meta: Meta<typeof FdsBlockAlert> = {
  title: 'FDS/Blocks/FdsBlockAlert',
  component: FdsBlockAlert,
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: {
        transform: blockAlertTransform,
      },
    },
  },
  argTypes: {
    closeable: { control: { type: 'boolean' } },
    collapsable: { control: { type: 'boolean' } },
    expanded: { control: { type: 'boolean' } },
    heading: { control: { type: 'text' } },
    default: { control: { type: 'text' } },
  },
  args: {
    visible: true,
    closeable: false,
    collapsable: false,
    expanded: false,
    heading: 'About this component',
    default: 'This is an alert block with some important information.',
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args: Story['args']) => ({
    components: { FdsBlockAlert },
    setup: () => ({ args }),
    template: `<FdsBlockAlert v-bind="args"><p>{{ args.default }}</p></FdsBlockAlert>`,
  }),
  args: {
    heading: 'About this component',
    default: 'This is an alert block with some important information.',
  },
}

export const WithHeading: Story = {
  render: () => ({
    components: { FdsBlockAlert },
    template: `
      <FdsBlockAlert heading="Information">
        <p>This alert block has a <a href="test" class="link">test</a> heading and provides important information to the user.</p>
      </FdsBlockAlert>
    `,
  }),
  parameters: {
    docs: {
      source: {
        transform: () => `<FdsBlockAlert heading="Information">
  <p>This alert block has a <a href="test" class="link">test</a> heading and provides important information to the user.</p>
</FdsBlockAlert>`,
      },
    },
  },
}

export const Collapsable: Story = {
  render: () => ({
    components: { FdsBlockAlert },
    template: `
      <FdsBlockAlert heading="Collapsable Alert" collapsable>
        <p>This alert block can be collapsed and expanded. The content below is only visible when expanded.</p>
        <p>Additional details about the alert can be shown here.</p>
      </FdsBlockAlert>
    `,
  }),
  parameters: {
    docs: {
      source: {
        transform: () => `<FdsBlockAlert heading="Collapsable Alert" collapsable>
  <p>This alert block can be collapsed and expanded. The content below is only visible when expanded.</p>
  <p>Additional details about the alert can be shown here.</p>
</FdsBlockAlert>`,
      },
    },
  },
}