import BmsCard from '@/components/layout/BmsCard.vue';
import { vueRouter } from 'storybook-vue3-router';

export default {
  title: 'Composants/layout/Card',
  component: BmsCard,
  decorators: [
    vueRouter([
      {
        name: 'firstRoute',
        path: '/toto',
      },
    ]),
  ],
};

const Template = (args) => ({
  components: {
    BmsCard,
  },
  setup() {
    return { args };
  },
  template: `
    <BmsCard v-bind="args" style="width: 300px; height: 200px;">
      <template #default>
        <div>This is content</div>
      </template>
    </BmsCard>
  `,
});

export const WithLink = Template.bind({});
WithLink.args = {
  to: '/toto',
};

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

export const Animated = Template.bind({});
Animated.args = { animated: true };

export const Success = Template.bind({});
Success.args = { type: 'success' };

export const Danger = Template.bind({});
Danger.args = { type: 'danger' };

export const Warning = Template.bind({});
Warning.args = { type: 'warning' };

export const Information = Template.bind({});
Information.args = { type: 'information' };

const TemplateWithAction = (args) => ({
  components: {
    BmsCard,
  },
  setup() {
    return { args };
  },
  template: `
    <BmsCard v-bind="args" style="width: 300px; height: 200px;">
      <template #default>
        <div>This is content</div>
      </template>
      <template #action>
        action
      </template>
    </BmsCard>
  `,
});

export const DefaultWithAction = TemplateWithAction.bind({});
DefaultWithAction.args = {};

export const AnimatedWithAction = TemplateWithAction.bind({});
AnimatedWithAction.args = { animated: true };

export const SuccessWithAction = TemplateWithAction.bind({});
SuccessWithAction.args = { type: 'success' };

export const DangerWithAction = TemplateWithAction.bind({});
DangerWithAction.args = { type: 'danger' };

export const WarningWithAction = TemplateWithAction.bind({});
WarningWithAction.args = { type: 'warning' };

export const InformationWithAction = TemplateWithAction.bind({});
InformationWithAction.args = { type: 'information' };
