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

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

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

export const Default = Template.bind({});
Default.args = {
  message:
    'Alas!  If our impulses were confined to hunger, thirst, and desire, we might be nearly free; but now we are moved by every wind that blows and a chance word or scene that that word may convey to us.',
};
export const Small = Template.bind({});
Small.args = {
  small: true,
  message:
    'Alas!  If our impulses were confined to hunger, thirst, and desire, we might be nearly free; but now we are moved by every wind that blows and a chance word or scene that that word may convey to us.',
};

export const NonDismissable = Template.bind({});
NonDismissable.args = {
  dismissable: false,
  message:
    'Alas! Why does man boast of sensibilities superior to those apparent in the brute; it only renders them more necessary beings. If our impulses were confined to hunger, thirst, and desire, we might be nearly free; but now we are moved by every wind that blows and a chance word or scene that that word may convey to us.',
};

export const Danger = Template.bind({});
Danger.args = {
  type: StatusType.Danger,
  message:
    'Alas!  If our impulses were confined to hunger, thirst, and desire, we might be nearly free; but now we are moved by every wind that blows and a chance word or scene that that word may convey to us.',
};

export const Warning = Template.bind({});
Warning.args = {
  type: StatusType.Warning,
  message:
    'Alas!  If our impulses were confined to hunger, thirst, and desire, we might be nearly free; but now we are moved by every wind that blows and a chance word or scene that that word may convey to us.',
};

const TemplateWithSlots = (args) => ({
  components: {
    BmsAlert,
    BmsButton,
  },
  setup() {
    return { args };
  },
  template: `
    <BmsAlert v-bind="args">
      {{args.slots.subtitle}} 
      <template #action v-if="args.slots.alertAction">
        <BmsButton>{{args.slots.alertAction}}</BmsButton>
      </template>
    </BmsAlert>
  `,
});
export const WithSlots = TemplateWithSlots.bind({});
WithSlots.args = {
  message:
    'Alas!  If our impulses were confined to hunger, thirst, and desire, we might be nearly free;',
  slots: {
    subtitle:
      'but now we are moved by every wind that blows and a chance word or scene that that word may convey to us.',
    alertAction: 'ACTION',
  },
};
