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

import CpTabs from '@/components/CpTabs.vue'
import CpTransitionTabContent from '@/components/CpTransitionTabContent.vue'

const meta = {
  title: 'Transitions/CpTransitionTabContent',
  component: CpTransitionTabContent,
  argTypes: {
    duration: {
      control: { type: 'number', min: 100, max: 800, step: 50 },
    },
    direction: { table: { disable: true } },
  },
} satisfies Meta<typeof CpTransitionTabContent>

export default meta
type Story = StoryObj<typeof meta>

const tabs = [
  { title: 'Details', icon: 'info' },
  { title: 'History', icon: 'clock' },
  { title: 'Settings', icon: 'settings' },
]

const tabBodies = [
  'Overview and metadata for this item.',
  'Past changes and audit trail appear here.',
  'Preferences and access rules for this workspace.',
]

const layoutStyle = 'display: flex; flex-direction: column; gap: 20px; min-width: 600px;'

const panelStyle =
  'min-height: 120px; padding: 20px; border-radius: 12px; background: #f3f4f6; font-size: 15px; line-height: 1.5;'

/**
 * Directional slide between tab panels. `direction` is driven by the
 * current vs. previous tab index to slide forward or backward.
 */
export const Default: Story = {
  args: {
    duration: 300,
  },
  render: (args) => ({
    components: { CpTabs, CpTransitionTabContent },
    setup() {
      const activeTabIndex = ref(0)
      const transitionDirection = ref<'forward' | 'backward'>('forward')

      const onTabClick = (index: number) => {
        if (index === activeTabIndex.value) return
        transitionDirection.value = index > activeTabIndex.value ? 'forward' : 'backward'
        activeTabIndex.value = index
      }

      return {
        args,
        tabs,
        tabBodies,
        activeTabIndex,
        transitionDirection,
        onTabClick,
        layoutStyle,
        panelStyle,
      }
    },
    template: `
      <div :style="layoutStyle">
        <CpTabs :tabs="tabs" @on-tab-click="onTabClick" />
        <CpTransitionTabContent v-bind="args" :direction="transitionDirection">
          <div :key="activeTabIndex" :style="panelStyle">
            <strong>{{ tabs[activeTabIndex].title }}</strong>
            <p style="margin: 8px 0 0;">{{ tabBodies[activeTabIndex] }}</p>
          </div>
        </CpTransitionTabContent>
      </div>
    `,
  }),
}