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

import { Button as NychButton } from '@nychthemeron/library'

const meta = {
  title: 'Components/Button',
  component: NychButton,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    severity: {
      control: { type: 'select' },
      options: ['primary', 'secondary', 'info', 'success', 'warning', 'danger'],
      description: 'Button color severity',
    },
    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',
    severity: 'primary',
  },
}

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

export const Info: Story = {
  args: {
    label: 'Info Button',
    severity: 'info',
  },
}

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

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

export const Danger: Story = {
  args: {
    label: 'Danger Button',
    severity: '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 style="display: flex; gap: 1rem; align-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 style="display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem;">
        <NychButton
          label="Click Me"
          @click="handleClick"
          :loading="isLoading"
          :disabled="isLoading"
        />
        <p style="font-size: 1.2rem; font-weight: bold;">Clicks: {{ clickCount }}</p>
      </div>
    `,
  }),
}