import { SquarePen } from 'lucide-vue-next';
import BmsIconButton from './BmsIconButton.vue';
import { StatusType } from '@/models';
import { vueRouter } from 'storybook-vue3-router';

const WITH_DEFAULT_SLOT = {
  default: '<SquarePen/>',
};

export default {
  title: 'Composants/button/IconButton',
  component: BmsIconButton,
  tags: ['with_useable_code'],
  decorators: [
    vueRouter([
      {
        name: 'firstRoute',
        path: '/toto',
      },
    ]),
  ],
  argTypes: {
    mode: {
      control: { type: 'select' },
      options: ['default', 'danger'],
    },
    to: { control: { type: 'text' } },
  },
};

const Template = (args) => ({
  components: {
    BmsIconButton,
    SquarePen,
  },
  setup() {
    return { args };
  },
  template: `
    <br><b>default</b>
    <BmsIconButton v-bind="args"><SquarePen/></BmsIconButton>
    <br>
    <br> <b>:hover</b>
    <BmsIconButton v-bind="args" class="_hover"><SquarePen/></BmsIconButton>

    <br>
    <br> <b>Small</b>
    <BmsIconButton v-bind="args" small><SquarePen/></BmsIconButton>


    <br> <b>BmsIconButton must be on same alignment (using BmsLink and native button html tag)</b>
    <BmsIconButton
        tooltip-text="BmsIconButton with BmsLink"
        to="/toto"
    >
      <SquarePen/>
    </BmsIconButton>
    <BmsIconButton
        tooltip-text="BmsIconButton with button html tag"
    >
      <Heart />
    </BmsIconButton>
  `,
});

export const IconButton = Template.bind({});
IconButton.args = { ...WITH_DEFAULT_SLOT };

export const IconButtonWithTargetLink = Template.bind({});
IconButtonWithTargetLink.args = {
  target: '_blank',
  to: { name: 'firstRoute' },
  ...WITH_DEFAULT_SLOT,
};

export const DangerIconButton = Template.bind({});
DangerIconButton.args = { mode: StatusType.Danger, ...WITH_DEFAULT_SLOT };
