import UiTab from '@/components/navigation/UiTab.vue';
import { within } from 'storybook/test';

import template from '@/documentation/template_internal_component.mdx';

export default {
  parameters: {
    docs: {
      page: template,
    },
  },
  tags: ['code-only'],
  title: 'Composants/navigation/UiTab',
  component: UiTab,
  argTypes: {
    items: {},
  },
};

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

export const Default = Template.bind({});
Default.args = {
  selectedTabId: 'toto',
  tab: { name: 'Titi', routePath: 'titi' },
};

export const Active = Template.bind({});
Active.args = {
  selectedTabId: 'Titi',
  tab: { name: 'Titi', routePath: 'titi' },
};

export const Disabled = Template.bind({});
Disabled.args = {
  selectedTabId: 'toto',
  tab: { name: 'Titi', routePath: 'titi', disabled: true },
};

export const Error = Template.bind({});
Error.args = {
  selectedTabId: 'toto',
  tab: { name: 'Titi', routePath: 'titi', error: true },
};

export const Hover = Template.bind({});
Hover.args = {
  selectedTabId: 'toto',
  tab: { name: 'Titi', routePath: 'titi' },
};
Hover.play = async ({ canvasElement }) => {
  const canvas = within(canvasElement);
  await canvas.getByTestId('tab').classList.add('tab__hover');
};
