import * as React from 'react'
import { Button, ButtonElement, ButtonSize, ButtonVariant, Props } from '.'
import { Meta, Story } from '@storybook/react'

const meta: Meta = {
  title: 'components/Button',
  component: Button,
  argTypes: { onClick: { action: 'clicked' } },
}

const Template: Story<Props> = ({ ref, ...args }) => (
  <Button
    {...args}
  />
)

export const Default = Template.bind({})
Default.args = {
  children: 'Button',
}

export const Primary = Template.bind({})
Primary.args = {
  children: 'Button',
  border: true,
  variant: ButtonVariant.PRIMARY,
}

export const Border = Template.bind({})
Border.args = {
  children: 'Button',
  border: true,
}

export const Disabled = Template.bind({})
Disabled.args = {
  children: 'Button',
  border: true,
  disabled: true,
}

export const DisabledLink = Template.bind({})
DisabledLink.args = {
  children: 'Button',
  border: true,
  disabled: true,
  element: ButtonElement.A,
  href: 'https://www.example.com',
}

export const Link = Template.bind({})
Link.args = {
  children: 'Button',
  border: true,
  element: ButtonElement.A,
  href: 'https://www.example.com',
}

export const Small = Template.bind({})
Small.args = {
  children: 'Button',
  border: true,
  size: ButtonSize.SMALL,
}

export const Large = Template.bind({})
Large.args = {
  children: 'Button',
  border: true,
  size: ButtonSize.LARGE,
}

export const Block = Template.bind({})
Block.args = {
  children: 'Button',
  border: true,
  block: true,
}

export const DisabledWithinFieldset: Story<Props> = ({ ref, disabled, ...args }) => (
  <fieldset
    disabled={disabled}
  >
    <Button
      {...args}
    />
  </fieldset>
)
DisabledWithinFieldset.args = {
  children: 'Button',
  border: true,
  disabled: true,
}

export default meta
