import UiMenuItem from '@/components/navigation/UiMenuItem.vue';
import { Activity, ShieldAlert, ShieldCheck, ShieldOff } from 'lucide-vue-next';
import { vueRouter } from 'storybook-vue3-router';
import template from '@/documentation/template_internal_component.mdx';
import { StatusType } from '@/models';

export default {
  parameters: {
    docs: {
      page: template,
    },
  },
  tags: ['code-only'],
  title: 'Composants/navigation/UiMenuItem',
  component: UiMenuItem,
  decorators: [
    vueRouter([
      {
        name: 'route',
        path: '/ma-route',
      },
    ]),
  ],
  argTypes: {},
};

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

export const Default = Template.bind({});
Default.args = {
  item: {
    label: 'Item label',
    link: { name: 'route' },
  },
};

export const ExternalLink = Template.bind({});
ExternalLink.args = {
  item: {
    label: 'Item label',
    link: 'http://google.fr',
  },
};

export const TargetLink = Template.bind({});
TargetLink.args = {
  item: {
    label: 'Item label',
    link: 'http://google.fr',
  },
  target: '_blank',
};

export const WithIcon = Template.bind({});
WithIcon.args = {
  item: {
    label: 'Item label',
    link: { name: 'route' },
    icon: Activity,
  },
};

export const Active = Template.bind({});
Active.args = {
  item: {
    label: 'Item label',
    link: { name: 'route' },
    icon: Activity,
  },
  active: true,
};

const TemplateStatus = (args) => ({
  components: {
    UiMenuItem,
  },
  setup() {
    return { args };
  },
  template: `
      <UiMenuItem :item="args.items[0]"/>
      <UiMenuItem :item="args.items[0]" :active="true"/>
      <UiMenuItem :item="args.items[1]"/>
      <UiMenuItem :item="args.items[1]" :active="true"/>
      <UiMenuItem :item="args.items[2]"/>
      <UiMenuItem :item="args.items[2]" :active="true"/>
      <UiMenuItem :item="args.items[3]"/>
      <UiMenuItem :item="args.items[3]" :active="true"/>
    `,
});

export const WithStatusType = TemplateStatus.bind({});
WithStatusType.args = {
  items: [
    {
      label: 'Item label',
      link: 'http://google.fr',
      icon: ShieldAlert,
      status: StatusType.Danger,
    },
    {
      label: 'Item label',
      link: 'http://google.fr',
      icon: ShieldAlert,
      status: StatusType.Warning,
    },
    {
      label: 'Item label',
      link: 'http://google.fr',
      icon: ShieldCheck,
      status: StatusType.Success,
    },
    {
      label: 'Item label',
      link: 'http://google.fr',
      icon: ShieldOff,
      status: StatusType.Information,
    },
  ],
};
