import type { Meta, StoryObj } from '@storybook/vue3'
import { ref } from 'vue'
import { NychButton } from '@nychthemeron/library/components'

const meta = {
  title: 'Components/Button',
  component: NychButton,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: { type: 'select' },
      options: ['primary', 'secondary', 'success', 'warning', 'danger'],
      description: 'Button variant style',
    },
    size: {
      control: { type: 'select' },
      options: ['small', 'normal', 'large'],
      description: 'Button size',
    },
    disabled: {
      control: { type: 'boolean' },
      description: 'Disable the button',
    },
    loading: {
      control: { type: 'boolean' },
      description: 'Show loading state',
    },
    label: {
      control: { type: 'text' },
      description: 'Button label text',
    },
  },
} satisfies Meta<typeof NychButton>

export default meta
type Story = StoryObj<typeof meta>

export const Primary: Story = {
  args: {
    label: 'Primary Button',
    variant: 'primary',
  },
}

export const Secondary: Story = {
  args: {
    label: 'Secondary Button',
    variant: 'secondary',
  },
}

export const Success: Story = {
  args: {
    label: 'Success Button',
    variant: 'success',
  },
}

export const Warning: Story = {
  args: {
    label: 'Warning Button',
    variant: 'warning',
  },
}

export const Danger: Story = {
  args: {
    label: 'Danger Button',
    variant: 'danger',
  },
}

export const Disabled: Story = {
  args: {
    label: 'Disabled Button',
    disabled: true,
  },
}

export const Loading: Story = {
  args: {
    label: 'Loading Button',
    loading: true,
  },
}

export const Sizes: Story = {
  render: () => ({
    components: { NychButton },
    setup() {
      return {}
    },
    template: `
      <div class="flex gap-4 items-center">
        <NychButton label="Small" size="small" />
        <NychButton label="Normal" size="normal" />
        <NychButton label="Large" size="large" />
      </div>
    `,
  }),
}

export const Interactive: Story = {
  render: () => ({
    components: { NychButton },
    setup() {
      const clickCount = ref(0)
      const isLoading = ref(false)

      const handleClick = () => {
        clickCount.value++
        isLoading.value = true
        setTimeout(() => {
          isLoading.value = false
        }, 1000)
      }

      return { clickCount, isLoading, handleClick }
    },
    template: `
      <div class="text-center">
        <NychButton
          label="Click Me"
          @click="handleClick"
          :loading="isLoading"
        />
        <p class="mt-4 text-lg">Clicks: {{ clickCount }}</p>
      </div>
    `,
  }),
}