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

const blockInfoTransform = (
  _src: string,
  storyContext: {
    args?: {
      heading?: string
      headerInfo?: string
      default?: string
      icon?: string
      tight?: boolean
    }
  },
) => {
  const args = storyContext?.args || {}
  const attrs = []

  if (args.icon) attrs.push(`icon="${args.icon}"`)
  if (args.tight) attrs.push(`:tight="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 `<FdsBlockInfo${attrsStr}>${content}</FdsBlockInfo>`
}

const meta: Meta<typeof FdsBlockInfo> = {
  title: 'FDS/Blocks/FdsBlockInfo',
  component: FdsBlockInfo,
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: {
        transform: blockInfoTransform,
      },
    },
  },
  argTypes: {
    heading: { control: { type: 'text' } },
    iconSize: { control: { type: 'select' }, options: ['small', 'large'] },
    icon: { control: { type: 'select' }, options: Object.keys(icons) },
    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',
    iconSize: 'small',
    icon: undefined,
    headerInfo: '',
    header: 'About this component',
    default:
      'The Info 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: NonNullable<Story['args']>) => ({
    components: { FdsBlockInfo },
    setup: () => ({ args }),
    template: `
    <FdsBlockInfo v-bind="args">
        <template #headerInfo>
          <div v-if="args.headerInfo" v-html="args.headerInfo"></div>
        </template>
      <p>{{ args.default }}</p>
    </FdsBlockInfo>`,
  }),
  args: {
    heading: 'About this component',
    default:
      'The Info Block can contain various types and amounts of content. We recommend using multiple instances of it for grouping related content.',
  },
}

export const WithIcon: Story = {
  render: () => ({
    components: { FdsBlockInfo },
    template: `
      <FdsBlockInfo heading="About this component" icon="information" iconSize="large">
        <p>The Info Block can contain various types and amounts of content. We recommend using multiple instances of it for grouping related content.</p>
      </FdsBlockInfo>
    `,
  }),
}

export const Secondary: Story = {
  render: () => ({
    components: { FdsBlockInfo },
    template: `
      <FdsBlockInfo heading="About this component" icon="alert" color="blue">
        <p>The Info Block can contain various types and amounts of content. We recommend using multiple instances of it for grouping related content.</p>
      </FdsBlockInfo>
    `,
  }),
}