import type { Meta, StoryObj } from '@storybook/vue3'
import { UButton } from '../components'
import Sizes from '../types/sizes'
import UntitledColorTypes from '../types/untitledColorTypes'
import { ButtonProps } from '../types/buttonProps'
import { ExtractPropTypes } from 'vue'

const meta: Meta<typeof UButton> = {
  title: 'Example/Button',
  component: UButton,
  tags: ['autodocs'],
  argTypes: {
    variant: { table: { disable: true } },
    type: {
      control: 'select',
      options: [
        UntitledColorTypes.primary,
        UntitledColorTypes.secondaryGray,
        UntitledColorTypes.secondaryColor,
        UntitledColorTypes.tertiaryGray,
        UntitledColorTypes.tertiaryColor,
        UntitledColorTypes.linkGray,
        UntitledColorTypes.linkColor,
      ],
    },
    size: { control: 'select', options: ['sm', 'md', 'lg', 'xl', 'xxl'] },
    disabled: { control: 'boolean', defaultValue: false },
    loading: { control: 'boolean', defaultValue: false },
    destructive: { control: 'boolean', defaultValue: false },
    color: { table: { disable: true } },
    borderColor: { table: { disable: true } },
    backgroundColor: { table: { disable: true } },
    prependIcon: {
      control: 'select',
      options: [
        null,
        'activity',
        'bookmark-x',
        'bookmark-add',
        'bookmark-check',
        'fingerprint-04',
      ],
    },
    appendIcon: {
      control: 'select',
      options: [
        null,
        'activity',
        'activity-heart',
        'anchor',
        'archive',
        'asterisk',
      ],
    },
  },
}

export default meta

type Story = StoryObj<typeof UButton>

export const BaseButton: Story = {
  render: (args: ExtractPropTypes<ButtonProps>) => ({
    components: { UButton },
    setup() {
      return { args }
    },
    template: '<UButton v-bind="args" class="mt-10 mx-auto">Button</UButton>',
  }),
  args: {
    size: 'sm' as Sizes,
    type: UntitledColorTypes.primary as UntitledColorTypes,
    prependIcon: 'placeholder',
    appendIcon: 'placeholder',
    tabindex: 0,
  } as ButtonProps,
}

export const LinkButton: Story = {
  render: (args: ExtractPropTypes<ButtonProps>) => ({
    components: { UButton },
    setup() {
      return { args }
    },
    template:
      '<UButton v-bind="args" class="mt-10 mx-auto" to="/">Link</UButton>',
  }),
  args: {
    size: 'sm' as Sizes,
    type: UntitledColorTypes.primary as UntitledColorTypes,
    prependIcon: 'placeholder',
    appendIcon: 'placeholder',
  } as ButtonProps,
}

export const IconButton: Story = {
  render: (args: ExtractPropTypes<ButtonProps>) => ({
    components: { UButton },
    setup() {
      return { args }
    },
    template: '<UButton v-bind="args" class="mt-10"></UButton>',
  }),
  args: {
    size: 'sm' as Sizes,
    type: UntitledColorTypes.primary as UntitledColorTypes,
    prependIcon: 'placeholder',
  } as ButtonProps,
}