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

import CpButton from '@/components/CpButton.vue'
import CpTransitionSlide from '@/components/CpTransitionSlide.vue'

const meta = {
  title: 'Transitions/CpTransitionSlide',
  component: CpTransitionSlide,
  argTypes: {
    slideTo: {
      control: 'select',
      options: ['top', 'left'],
    },
    mode: {
      control: 'select',
      options: ['default', 'in-out', 'out-in'],
    },
  },
} satisfies Meta<typeof CpTransitionSlide>

export default meta
type Story = StoryObj<typeof meta>

const wrapperStyle = 'display: flex; flex-direction: column; align-items: center; gap: 60px; min-width: 600px;'

const panelStyle =
  'min-width: 260px; max-width: 320px; padding: 20px; border-radius: 12px; background: #f3f4f6; text-align: center;'

/**
 * Slide between two panels. The `slideTo` prop controls direction
 * (`top` or `left`) and `mode` follows Vue's `<Transition mode>` rules.
 */
export const Toggle: Story = {
  name: 'Toggle',
  args: {
    slideTo: 'top',
    mode: 'out-in',
  },
  render: (args) => ({
    components: { CpTransitionSlide, CpButton },
    setup() {
      const showFirst = ref(true)
      return { args, showFirst }
    },
    template: `
      <div style="${wrapperStyle}">
        <CpButton appearance="primary" color="accent" @click="showFirst = !showFirst">
          <CpTransitionSize size="md">
            <span>{{ showFirst ? 'Show second view' : 'Show first view' }}</span>
          </CpTransitionSize>
        </CpButton>
        <CpTransitionSlide v-bind="args">
          <div :key="showFirst ? 'a' : 'b'" style="${panelStyle}">
            <template v-if="showFirst">
              <strong>View A</strong>
              <p style="margin: 8px 0 0; font-size: 14px;">Vertical slide (top).</p>
            </template>
            <template v-else>
              <strong>View B</strong>
              <p style="margin: 8px 0 0; font-size: 14px;">Vertical slide (top).</p>
            </template>
          </div>
        </CpTransitionSlide>
      </div>
    `,
  }),
}