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

const blockContentTransform = (
  _src: string,
  storyContext: {
    args?: {
      heading?: string
      headerInfo?: string
      default?: string
      tight?: boolean
      color?: string
      borderLeft?: boolean
    }
  },
) => {
  const args = storyContext?.args || {}
  const attrs = []
  if (args.heading) attrs.push(`heading="${args.heading}"`)
  if (args.tight) attrs.push(`:tight="true"`)
  if (args.color && args.color !== 'blue') attrs.push(`color="${args.color}"`)
  if (args.borderLeft) attrs.push(`:borderLeft="true"`)

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

  if (args.headerInfo || args.default) {
    content = '\n'
    if (args.headerInfo) {
      content += `  <template #headerInfo>\n    <div v-html='${args.headerInfo}' />\n  </template>\n`
    }
    if (args.default) {
      content += `  <p>${args.default}</p>\n`
    }
  }

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

const meta: Meta<typeof FdsBlockContent> = {
  title: 'FDS/Blocks/FdsBlockContent',
  component: FdsBlockContent,
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: {
        transform: blockContentTransform,
      },
    },
  },
  argTypes: {
    heading: { control: { type: 'text' } },
    borderLeft: { control: { type: 'radio' }, options: ['', 'green', 'yellow', 'red'] },
    tight: { control: { type: 'boolean' } },
    headerInfo: {
      control: { type: 'text' },
      description: 'Header info slot (HTML only in Storybook, supports Vue components when consumed)',
    },
    default: { control: { type: 'text' } },
  },
  args: {
    heading: 'About this component',
    borderLeft: undefined,
    tight: false,
    headerInfo: '',
    default:
      'The Content Block can contain various types and amounts of content. We recommend using multiple instances of it for grouping related content.',
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args: Story['args']) => ({
    components: { FdsBlockContent },
    setup: () => ({ args }),
    template: `
    <FdsBlockContent v-bind="args">
        <template #headerInfo>
          <div v-if="args.headerInfo" v-html="args.headerInfo"></div>
        </template>
      <p>{{ args.default }}</p>
    </FdsBlockContent>`,
  }),
  args: {
    heading: 'About this component',
    default:
      'The Content Block can contain various types and amounts of content. We recommend using multiple instances of it for grouping related content.',
  },
}

export const WithBorderLeft: Story = {
  render: () => ({
    components: { FdsBlockContent },
    template: `
      <FdsBlockContent heading="About this component" borderLeft="var(--color-green-600" icon="alert">
        <p>The Content Block can contain various types and amounts of content. We recommend using multiple instances of it for grouping related content.</p>
      </FdsBlockContent>
    `,
  }),
}

export const Tight: Story = {
  render: () => ({
    components: { FdsBlockContent },
    template: `
      <FdsBlockContent heading="About this component" tight>
        <p>The Content Block can contain various types and amounts of content. We recommend using multiple instances of it for grouping related content.</p>
      </FdsBlockContent>
    `,
  }),
}