import BmsTabs from '@/components/navigation/BmsTabs.vue';
import { vueRouter } from 'storybook-vue3-router';

export default {
  title: 'Composants/navigation/Tabs',
  component: BmsTabs,
  argTypes: {
    items: {},
  },
  decorators: [
    vueRouter([
      {
        name: 'titi',
        path: '/titi',
      },
      {
        path: '/',
      },
      {
        name: 'toto',
        path: '/toto',
      },
    ]),
  ],
};

const Template = (args) => ({
  components: {
    BmsTabs,
  },
  setup() {
    return { args };
  },
  template: `
    <BmsTabs v-bind="args" />
  `,
});

export const Default = Template.bind({});
Default.args = {
  title: 'Title',
  tabs: [
    { name: 'Titi', id: 'titi' },
    { name: 'Toto', id: 'toto' },
  ],
};

export const DefaultWithoutId = Template.bind({});
DefaultWithoutId.args = {
  title: 'Title',
  tabs: [{ name: 'Titi' }, { name: 'Toto' }],
};

export const WithSelectedTabId = Template.bind({});
WithSelectedTabId.args = {
  title: 'Title',
  initialTabId: 'Toto',
  tabs: [
    { name: 'Titi', id: 'titi' },
    { name: 'Tata' },
    { name: 'Toto' },
    { name: 'Tutu' },
  ],
};

export const WithRouterEngine = Template.bind({});
WithRouterEngine.args = {
  title: 'Title',
  initialTabId: 'titi',
  tabs: [
    { name: 'Titi', routeName: 'titi', id: 'titi' },
    { name: 'Toto', routePath: '/toto' },
  ],
};

export const WithError = Template.bind({});
WithError.args = {
  title: 'Title',
  initialTabId: 'titi',
  tabs: [
    { name: 'Titi', routeName: 'titi', id: 'titi' },
    { name: 'Toto', routePath: '/toto', error: true },
  ],
};

export const WithDisabled = Template.bind({});
WithDisabled.args = {
  title: 'Title',
  initialTabId: 'titi',
  tabs: [
    { name: 'Titi', routeName: 'titi', id: 'titi' },
    { name: 'Toto', routePath: '/toto', disabled: true },
  ],
};
