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

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

export const Default = () => ({
  Component,
  props: { light: boolean('Light variant (light)', false) }
});

export const Clickable = () => ({
  Component,
  props: {
    story: 'clickable',
    href: text('Href for clickable UI (href)', 'javascript:void(0)'),
    light: boolean('Light variant (light)', false)
  }
});

export const MultiSelect = () => ({
  Component,
  props: {
    story: 'multi-select',
    selected: boolean('Selected (selected)', false),
    light: boolean('Light variant (light)', false)
  }
});

MultiSelect.story = { name: 'Multi-select' };

export const Selectable = () => ({
  Component,
  props: {
    story: 'selectable',
    name: text('Form item name (name in <RadioTile>)', 'tiles'),
    light: boolean('Light variant (light)', false)
  }
});

export const Expandable = () => ({
  Component,
  props: {
    story: 'expandable',
    tabindex: text('Tab index (tabindex)', '0'),
    expanded: boolean('Expanded (expanded)', false),
    tileMaxHeight: number('Max height (tileMaxHeight)', 0),
    tileCollapsedIconText: text(
      'Collapsed icon text (tileCollapsedIconText)',
      'Interact to Expand tile'
    ),
    tileExpandedIconText: text(
      'Collapsed icon text (tileExpandedIconText)',
      'Interact to Collapse tile'
    ),
    light: boolean('Light variant (light)', false)
  }
});