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

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

const meta = {
  title: 'Transitions/CpTransitionSize',
  component: CpTransitionSize,
  argTypes: {
    type: {
      control: 'select',
      options: ['width', 'height'],
    },
  },
} satisfies Meta<typeof CpTransitionSize>

export default meta
type Story = StoryObj<typeof meta>

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

/**
 * Animate a button's width when its inner label changes. Click the
 * button to swap between a short and a longer label.
 */
export const Default: Story = {
  args: {
    type: 'width',
  },
  render: (args) => ({
    components: { CpTransitionSize, CpButton },
    setup() {
      const isShort = ref(true)
      const dynamicLabel = computed(() => {
        return isShort.value ? 'Short label' : 'Much longer label'
      })
      return { args, isShort, dynamicLabel }
    },
    template: `
      <div style="${wrapperStyle}">
        <CpButton
        appearance="primary"
        color="accent"
        @click="isShort = !isShort"
        >
          <CpTransitionSize v-bind="args">
            <span>{{ dynamicLabel }}</span>
          </CpTransitionSize>
        </CpButton>
      </div>
    `,
  }),
}

/**
 * Height mode — smoothly animates a dialog's body height as the step
 * content (and therefore its size) changes.
 */
export const HeightTransition: Story = {
  args: {
    type: 'height',
  },
  render: (args) => ({
    components: { CpTransitionSize, CpButton },
    setup() {
      const isOpen = ref(false)
      const currentStep = ref(0)
      const stepCount = 3

      const dialogTitle = computed(() => `Step ${currentStep.value + 1} of ${stepCount}`)

      /** More steps ⇒ more paragraphs (1-based depth). */
      const paragraphCount = computed(() => (currentStep.value + 1) * 3)

      const openDialog = () => {
        currentStep.value = 0
        isOpen.value = true
      }

      const closeDialog = () => {
        isOpen.value = false
        currentStep.value = 0
      }

      const paragraphStyle = computed(() => {
        return { margin: 0, whiteSpace: 'normal' }
      })

      return {
        args,
        isOpen,
        currentStep,
        stepCount,
        dialogTitle,
        paragraphCount,
        openDialog,
        closeDialog,
        paragraphStyle,
      }
    },
    template: `
      <div style="${wrapperStyle}">
        <CpButton appearance="primary" color="accent" @click="openDialog">
          Open stepped dialog
        </CpButton>
        <CpTransitionDialog>
          <CpDialog
            v-if="isOpen"
            :max-width="520"
            :title="dialogTitle"
            @close="closeDialog"
          >
            <CpTransitionSize v-bind="args">
              <div style="display: flex; flex-direction: column; gap: 8px;">
                <p v-for="i in paragraphCount" :key="i" :style="paragraphStyle">
                  Paragraph {{ i }}. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                </p>
              </div>
            </CpTransitionSize>
            <template #footer>
              <div style="display: flex; justify-content: space-between; gap: 8px; width: 100%;">
                <CpButton
                  v-if="currentStep > 0"
                  appearance="secondary"
                  color="neutral"
                  @click="currentStep--"
                >
                  Back
                </CpButton>
                <CpButton
                  v-if="currentStep < stepCount - 1"
                  appearance="primary"
                  color="accent"
                  @click="currentStep++"
                >
                  Next
                </CpButton>
                <CpButton
                  v-if="currentStep === stepCount - 1"
                  appearance="primary"
                  color="accent"
                  @click="closeDialog"
                >
                  Done
                </CpButton>
              </div>
            </template>
          </CpDialog>
        </CpTransitionDialog>
      </div>
    `,
  }),
}