import BmsCaption from './BmsCaption.vue';
import { StatusType } from '@/models/status-type.model';

export default {
  title: 'shared/BmsCaption',
  component: BmsCaption,
};

const Template = (args) => ({
  components: {
    BmsCaption,
  },
  setup() {
    return { args };
  },
  template: `
      <section>
        <template v-for="caption in args.captions">
          <BmsCaption v-bind="caption"/>
        </template>
      </section>
    `,
});

export const All = Template.bind({});
All.args = {
  captions: [
    { caption: 'Retro Compat : this my caption' },
    {
      caption: {
        label: 'Default : this my caption',
        mode: StatusType.Default,
      },
    },
    {
      caption: {
        label: 'Success : this my caption',
        mode: StatusType.Success,
      },
    },
    {
      caption: {
        label: 'Warning : this my caption',
        mode: StatusType.Warning,
      },
    },
    {
      caption: { label: 'Danger : this my caption', mode: StatusType.Danger },
    },
    {
      caption: {
        label:
          'Danger : this my caption with <script lang="js"> alert("super!");</script><a onclick=alert("toto") class=danger href=www.google.fr target=_blank>HTML</a>',
        labelAsHtml: true,
        mode: StatusType.Danger,
      },
    },
  ],
};
