import BmsFixedMenu from '@/components/navigation/BmsFixedMenu.vue';
import BmsBadge from '@/components/feedback/BmsBadge.vue';
import { Activity, ArrowBigDown, Globe, User } from 'lucide-vue-next';
import { vueRouter } from 'storybook-vue3-router';

export default {
  title: 'Composants/navigation/FixedMenu',
  component: BmsFixedMenu,
  argTypes: {
    items: {},
  },
  decorators: [
    vueRouter([
      {
        name: 'home',
        path: '/',
      },
      {
        name: 'activity',
        path: '/activity',
      },
      {
        name: 'users',
        path: '/users',
      },
      {
        name: 'thirdRoute',
        path: '/tutu',
      },
    ]),
  ],
};

const Template = (args) => ({
  components: {
    BmsFixedMenu,
    BmsBadge,
  },
  setup() {
    return { args };
  },
  template: `
    <BmsFixedMenu v-bind="args">
      <template v-if="args.additionalSlot" #additional>Additional</template>
      <template v-if="args.additionalSlot" #icon-end="{ item }" >
        <BmsBadge :pending="item.badgeCount"></BmsBadge>
      </template>
      <template v-if="args.footerSlot" #footer>Footer</template>
    </BmsFixedMenu>
  `,
});

export const Default = Template.bind({});
Default.args = {
  items: [
    {
      label: 'Activity',
      link: '/activity',
      icon: Activity,
    },
    {
      label: 'Users',
      link: '/users',
      icon: User,
    },
    {
      label: 'Parent',
      items: [
        {
          label: 'tata',
          link: '/tata',
          icon: Globe,
        },
        {
          label: 'tutu',
          link: '/tutu',
        },
      ],
    },
  ],
  activeLink: '/',
};

export const WithActiveLink = Template.bind({});
WithActiveLink.args = {
  items: [
    {
      label: 'Activity',
      link: '/activity',
      icon: Activity,
    },
    {
      label: 'Users',
      link: '/users',
      icon: User,
    },
  ],
  activeLink: '/activity',
};

export const WithSlots = Template.bind({});
WithSlots.args = {
  items: [
    {
      label: 'Activity',
      link: '/activity',
      icon: Activity,
      badgeCount: 1,
    },
    {
      label: 'Users',
      link: '/users',
      icon: User,
      badgeCount: 0,
    },
  ],
  activeLink: '/users',
  additionalSlot: true,
  footerSlot: true,
};
