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

const blockExpanderTransform = (
  _src: string,
  storyContext: {
    args?: {
      heading?: string
      icon?: string
      iconClass?: string
      open?: boolean
      disabled?: boolean
      default?: string
      stickerText?: string
      stickerColor?: string
    }
  },
) => {
  const args = storyContext?.args || {}
  const attrs = []

  if (args.heading) attrs.push(`heading="${args.heading}"`)
  if (args.icon) attrs.push(`icon="${args.icon}"`)
  if (args.iconClass) attrs.push(`iconClass="${args.iconClass}"`)
  if (args.open) attrs.push(':open="true"')
  if (args.disabled) attrs.push(':disabled="true"')
  if (args.stickerText) attrs.push(`sticker-text="${args.stickerText}"`)
  if (args.stickerColor) attrs.push(`sticker-color="${args.stickerColor}"`)

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

const meta: Meta<typeof FdsBlockExpander> = {
  title: 'FDS/Blocks/FdsBlockExpander',
  component: FdsBlockExpander,
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: {
        transform: blockExpanderTransform,
      },
    },
  },
  argTypes: {
    disabled: { control: { type: 'boolean' } },
    open: { control: { type: 'boolean' } },
    heading: { control: { type: 'text' } },
    icon: { control: { type: 'select' }, options: Object.keys(icons) },
    iconClass: { control: { type: 'text' } },
    default: { control: { type: 'text' } },
    stickerText: { control: { type: 'text' } },
    stickerColor: {
      control: { type: 'select' },
      options: ['blue', 'green', 'red', 'yellow', 'gray', 't_blue'],
    },
  },
  args: {
    disabled: false,
    open: false,
    heading: 'Expandable Content',
    icon: undefined,
    iconClass: undefined,
    default: 'This is the expandable content that shows when the block is opened.',
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args: Story['args']) => ({
    components: { FdsBlockExpander },
    setup: () => ({ args }),
    template: `<FdsBlockExpander v-bind="args"><p>{{ args.default }}</p></FdsBlockExpander>`,
  }),
  args: {
    heading: 'Expandable Content',
    default: 'This is the expandable content that shows when the block is opened.',
  },
}

export const WithIcon: Story = {
  render: () => ({
    components: { FdsBlockExpander },
    template: `
      <FdsBlockExpander heading="Settings" icon="settings">
        <div class="space-y-2">
          <p>This expander block has an icon in the header.</p>
          <p>Click to expand and see more content.</p>
        </div>
      </FdsBlockExpander>
    `,
  }),
}

export const WithSticker: Story = {
  render: () => ({
    components: { FdsBlockExpander },
    template: `
      <FdsBlockExpander
        heading="Status"
        sticker-text="Ny"
        sticker-color="green"
      >
        <div class="space-y-2">
          <p>Den här block expandern visar en sticker i headern.</p>
          <p>Använd den för att visa status, t.ex. "Ny", "Ändrad" eller "Viktig".</p>
        </div>
      </FdsBlockExpander>
    `,
  }),
}

export const Open: Story = {
  render: () => ({
    components: { FdsBlockExpander },
    template: `
      <FdsBlockExpander heading="Pre-opened Content" open>
        <p>This expander block starts in the open state.</p>
        <p>You can still click the header to close it.</p>
      </FdsBlockExpander>
    `,
  }),
}

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

export const MultipleBlocks: Story = {
  render: () => ({
    components: { FdsBlockExpander },
    template: `
      <div class="space-y-4">
        <FdsBlockExpander heading="First Block" icon="information">
          <p>Content for the first expander block.</p>
        </FdsBlockExpander>
        <FdsBlockExpander heading="Second Block" icon="settings">
          <p>Content for the second expander block.</p>
        </FdsBlockExpander>
        <FdsBlockExpander heading="Third Block" icon="alert">
          <p>Content for the third expander block.</p>
        </FdsBlockExpander>
      </div>
    `,
  }),
}