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

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

export const Default = () => ({
  Component,
  props: {
    tabProps: {
      disabled: boolean('Disabled (disabled in <Tab>)', false),
      href: text('The href for tab (href in <Tab>)', '#'),
      role: text('ARIA role (role in <Tab>)', 'presentation'),
      tabindex: number('Tab index (tabindex in <Tab>)', 0)
    },
    tabsProps: {
      className: 'some-class',
      selected: number('The index of the selected tab (selected in <Tabs>)', 1),
      triggerHref: text('The href of trigger button for narrow mode (triggerHref in <Tabs>)', '#'),
      role: text('ARIA role (role in <Tabs>)', 'navigation'),
      iconDescription: text(
        'The description of the trigger icon for narrow mode (iconDescription in <Tabs>)',
        'show menu options'
      ),
      tabContentClassName: text(
        'The className for the child `<TabContent>` components',
        'tab-content'
      )
    }
  }
});

export const Container = () => ({
  Component,
  props: {
    story: 'container',
    tabProps: {
      disabled: boolean('Disabled (disabled in <Tab>)', false),
      href: text('The href for tab (href in <Tab>)', '#'),
      role: text('ARIA role (role in <Tab>)', 'presentation'),
      tabindex: number('Tab index (tabindex in <Tab>)', 0)
    }
  }
});

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