import React from 'react'
import { Story, Meta } from '@storybook/react'
import { Button, ButtonProps } from './Button'

export default {
  title: 'Actions/Button',
  component: Button,
  argTypes: {
    primary: {
      name: 'primary',
      description: 'Identifies the primary action in a set of buttons',
      type: { name: 'boolean', required: false },
      control: { type: 'boolean' }
    },
    negative: {
      name: 'negative',
      description: 'Indicates a dangerous or potentially negative action',
      type: { name: 'boolean', required: false },
      control: { type: 'boolean' }
    },
    positive: {
      name: 'positive',
      description: 'Indicates a positive action',
      type: { name: 'boolean', required: false },
      control: { type: 'boolean' }
    },
    disabled: {
      name: 'disabled',
      description: 'Disables the button, disallowing interaction',
      type: { name: 'boolean', required: false },
      control: { type: 'boolean' }
    },
    loading: {
      name: 'loading',
      description:
        'Replaces button text with a spinner while a background action is being performed',
      type: { name: 'boolean', required: false },
      control: { type: 'boolean' }
    },
    large: {
      name: 'large',
      description:
        'Display button with extra padding',
      type: { name: 'boolean', required: false },
      control: { type: 'boolean' }
    },
    plain: {
      name: 'plain',
      description: 'Renders the button to look like a link',
      type: { name: 'boolean', required: false },
      control: { type: 'boolean' }
    },
    outline: {
      name: 'outline',
      description:
        'Gives the button a subtle alternative to the default button style',
      type: { name: 'boolean', required: false },
      control: { type: 'boolean' }
    },
    fullWidth: {
      name: 'fullWidth',
      description: 'Allows the button to grow to the width of its container',
      type: { name: 'boolean', required: false },
      control: { type: 'boolean' }
    },
    url: {
      name: 'url',
      description:
        'A destination to link to, rendered in the href attribute of a link',
      type: { name: 'string', required: false },
      control: { type: 'text' }
    },
    external: {
      name: 'external',
      description: 'Forces url to open in a new tab',
      type: { name: 'boolean', required: false },
      control: { type: 'boolean' }
    },
    onClick: {
      name: 'onClick',
      description: 'Callback when clicked',
      action: 'clicked'
    }
  }
} as Meta

const Template: Story<ButtonProps> = (args: any) => (
  <Button {...args}>A button</Button>
)

export const Primary = Template.bind({})
Primary.args = {
  primary: true
}

export const Negative = Template.bind({})
Negative.args = {
  negative: true
}

export const Positive = Template.bind({})
Positive.args = {
  positive: true
}

export const Plain = Template.bind({})
Plain.args = {
  plain: true
}

export const Outline = Template.bind({})
Outline.args = {
  outline: true
}

export const Disabled = Template.bind({})
Disabled.args = {
  disabled: true
}

export const Loading = Template.bind({})
Loading.args = {
  loading: true
}

export const FullWidth = Template.bind({})
FullWidth.args = {
  fullWidth: true
}

export const Large = Template.bind({})
Large.args = {
  fullWidth: true,
  large: true
}

export const ExternalLink = Template.bind({})
ExternalLink.args = {
  url: 'https://www.palenca.com/',
  external: true
}
