import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
import Component from './Button.Story.svelte';

export default { title: 'Button', decorators: [withKnobs] };

// TODO: add selectable renderIcon for Default, Icon-only stories

const kinds = {
  'Primary button (primary)': 'primary',
  'Secondary button (secondary)': 'secondary',
  'Danger button (danger)': 'danger',
  'Ghost button (ghost)': 'ghost'
};

const sizes = {
  Default: 'default',
  Field: 'field',
  Small: 'small'
};

export const Default = () => ({
  Component,
  props: {
    kind: select('Button kind (kind)', kinds, 'primary'),
    disabled: boolean('Disabled (disabled)', false),
    size: select('Button size (size)', sizes, 'default'),
    iconDescription: text('Icon description (iconDescription)', 'Button icon'),
    small: boolean('Small (small) - Deprecated in favor of `size`', false)
  }
});

export const IconOnlyButtons = () => ({
  Component,
  props: {
    story: 'icon-only buttons',
    kind: select('Button kind (kind)', kinds, 'primary'),
    disabled: boolean('Disabled (disabled)', false),
    size: select('Button size (size)', sizes, 'default'),
    iconDescription: text('Icon description (iconDescription)', 'Button icon'),
    tooltipPosition: select(
      'Tooltip position (tooltipPosition)',
      ['top', 'right', 'bottom', 'left'],
      'bottom'
    ),
    tooltipAlignment: select(
      'Tooltip alignment (tooltipAlignment)',
      ['start', 'center', 'end'],
      'center'
    )
  }
});

export const SetOfButtons = () => ({
  Component,
  props: {
    story: 'set of buttons',
    disabled: boolean('Disabled (disabled)', false),
    small: boolean('Small (small)', false),
    size: select('Button size (size)', sizes, 'default'),
    iconDescription: text('Icon description (iconDescription)', 'Button icon')
  }
});

export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });