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

import CpButton from '@/components/CpButton.vue'
import CpIcon from '@/components/CpIcon.vue'
import CpTransitionCounter from '@/components/CpTransitionCounter.vue'

const meta = {
  title: 'Transitions/CpTransitionCounter',
  component: CpTransitionCounter,
  argTypes: {
    duration: {
      control: { type: 'number', min: 0, max: 2000, step: 50 },
    },
    counterNumber: { table: { disable: true } },
  },
} satisfies Meta<typeof CpTransitionCounter>

export default meta
type Story = StoryObj<typeof meta>

const rowStyle = 'padding: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 24px;'

const counterTextStyle = 'font-weight: bold; font-size: 4.5rem; line-height: 1; font-variant-numeric: tabular-nums;'

/**
 * Counter transition that animates number changes. Use the +/- buttons
 * (or the `duration` control) to see the slide-in / slide-out behaviour.
 */
export const Default: Story = {
  args: {
    duration: 150,
  },
  render: (args) => ({
    components: { CpTransitionCounter, CpButton, CpIcon },
    setup() {
      const count = ref(1)

      const increment = () => count.value++
      const decrement = () => {
        if (count.value <= 0) return
        count.value--
      }

      const isDecrementDisabled = computed(() => count.value <= 1)

      return { args, count, increment, decrement, isDecrementDisabled }
    },
    template: `
      <div style="${rowStyle}">
        <CpButton appearance="tertiary" color="accent" size="lg" :disabled="isDecrementDisabled" @click="decrement">
          <template #leading-icon>
            <CpIcon type="minus" />
          </template>
        </CpButton>
        <CpTransitionCounter :counter-number="count" :duration="args.duration">
          <span style="${counterTextStyle}">
            {{ count }}
          </span>
        </CpTransitionCounter>
        <CpButton appearance="tertiary" color="accent" size="lg" @click="increment">
          <template #leading-icon>
            <CpIcon type="plus" />
          </template>
        </CpButton>
      </div>
    `,
  }),
}