import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { ref } from 'vue'

import CpTransitionExpand from '@/components/CpTransitionExpand.vue'

const meta = {
  title: 'Transitions/CpTransitionExpand',
  component: CpTransitionExpand,
  argTypes: {
    // No props to document as this is a utility component
  },
} satisfies Meta<typeof CpTransitionExpand>

export default meta
type Story = StoryObj<typeof meta>

const wrapperStyle = 'display: flex; flex-direction: column; align-items: center; gap: 12px;'

/**
 * Animated height expansion. Wrap any element in `<CpTransitionExpand>`
 * and toggle its rendering with `v-if` to smoothly expand/collapse.
 */
export const Default: Story = {
  render: () => ({
    components: { CpTransitionExpand },
    setup() {
      const isExpanded = ref(false)
      return { isExpanded }
    },
    template: `
      <div style="${wrapperStyle}">
        <CpButton
          @click="isExpanded = !isExpanded"
          appearance="primary"
          color="purple"
        >
          {{ isExpanded ? 'Collapse' : 'Expand' }}
        </CpButton>

        <CpTransitionExpand>
          <div v-if="isExpanded" style="background: #F3F4F6; border-radius: 6px; padding: 16px;">
            <h3 style="margin: 0 0 8px 0;">Expanded Content</h3>
            <p style="margin: 0;">
              This content smoothly expands and collapses. The height transition is handled
              automatically by the CpTransitionExpand component.
            </p>
          </div>
        </CpTransitionExpand>
      </div>
    `,
  }),
}

/**
 * The transition works with content of any height — no manual value
 * needed.
 */
export const WithLongContent: Story = {
  render: () => ({
    components: { CpTransitionExpand },
    setup() {
      const isExpanded = ref(false)
      return { isExpanded }
    },
    template: `
      <div style="${wrapperStyle}">
        <CpButton
          @click="isExpanded = !isExpanded"
          appearance="primary"
          color="purple"
        >
          {{ isExpanded ? 'Collapse' : 'Expand' }}
        </CpButton>

        <CpTransitionExpand>
          <div v-if="isExpanded" style="
            background: #F3F4F6;
            border-radius: 6px;
          ">
            <h3 style="margin: 0 0 8px 0;">Long Content Example</h3>
            <p v-for="i in 5" :key="i" style="margin: 0 0 8px 0;">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
          </div>
        </CpTransitionExpand>
      </div>
    `,
  }),
}