import BmsMenuNav from '@/components/navigation/BmsMenuNav.vue';
import BmsBadge from '@/components/feedback/BmsBadge.vue';
import { Activity, BookOpen, Settings } from 'lucide-vue-next';
import { StatusType } from '../../models';

export default {
  title: 'Composants/navigation/MenuNav',
  component: BmsMenuNav,
  argTypes: {
    items: {},
  },
};

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

export const WithParentsItems = Template.bind({});
WithParentsItems.args = {
  items: [
    {
      label: 'toto',
      link: '/toto',
      icon: Activity,
      id: 'toto',
    },
    {
      label: 'titi',
      link: '/titi',
      id: 'titi',
      status: StatusType.Danger,
    },
    {
      label: 'Parent',
      items: [
        {
          label: 'tata',
          link: '/tata',
          icon: Activity,
          id: 'tata',
        },
        {
          label: 'tutu',
          link: '/tutu',
          id: 'tutu',
        },
      ],
    },
  ],
  activeLink: { path: '/toto' },
};

export const WithLinkParent = Template.bind({});
WithLinkParent.args = {
  items: [
    {
      label: 'Parent',
      link: '/toto',
      icon: Settings,
      id: 'toto',
      items: [
        {
          label: 'titi',
          link: '/titi',
          id: 'titi',
          icon: BookOpen,
        },
      ],
    },
  ],
  activeLink: '',
};

export const WithOpenParentsItems = Template.bind({});
WithOpenParentsItems.args = {
  items: [
    {
      label: 'toto',
      link: '/toto',
      icon: Activity,
      id: 'toto',
    },
    {
      label: 'titi',
      link: '/titi',
      id: 'titi',
    },
    {
      label: 'Parent',
      open: true,
      items: [
        {
          label: 'tata',
          link: '/tata',
          icon: Activity,
          id: 'tata',
        },
        {
          label: 'tutu',
          link: '/tutu',
          id: 'tutu',
        },
      ],
    },
  ],
  activeLink: { path: '/toto' },
};

export const TargetLinkInParent = Template.bind({});
TargetLinkInParent.args = {
  items: [
    {
      label: 'toto',
      link: '/toto',
      icon: Activity,
      id: 'toto',
    },
    {
      label: 'titi',
      link: '/titi',
      id: 'titi',
    },
    {
      label: 'Parent',
      open: true,
      items: [
        {
          label: 'tata',
          link: '/tata',
          icon: Activity,
          id: 'tata',
        },
        {
          label: 'tutu',
          link: '/tutu',
          id: 'tutu',
        },
      ],
    },
  ],
  activeLink: { path: '/tutu' },
};

export const WithAdditionalSlot = Template.bind({});
WithAdditionalSlot.args = {
  items: [
    {
      label: 'toto',
      link: '/toto',
      icon: Activity,
      id: 'toto',
      badgeCount: 5,
    },
    {
      label: 'titi',
      link: '/titi',
      id: 'titi',
    },
    {
      label: 'Parent',
      open: true,
      items: [
        {
          label: 'tata',
          link: '/tata',
          icon: Activity,
          id: 'tata',
        },
        {
          label: 'tutu',
          link: '/tutu',
          id: 'tutu',
        },
      ],
    },
  ],
  activeLink: { path: '/tutu' },
  additional: 'Additional',
  iconEndCustomSlot: true,
};

export const NonCollapsibleParentNoLink = Template.bind({});
NonCollapsibleParentNoLink.args = {
  items: [
    {
      label: 'Parent (non-collapsible)',
      id: 'parent-non-collapsible',
      collapsible: false,
      items: [
        {
          label: 'Enfant 1',
          link: '/enfant-1',
          id: 'enfant-1',
        },
        {
          label: 'Enfant 2',
          link: '/enfant-2',
          id: 'enfant-2',
        },
      ],
    },
  ],
  activeLink: { path: '/inexistant' },
};
