import BmsStep from '@/components/layout/BmsStep.vue';

export default {
  title: 'Composants/layout/Step',
  component: BmsStep,
  argTypes: {
    previousLabel: {
      control: { type: 'text' },
    },
    nextLabel: {
      control: { type: 'text' },
    },
    stepLabel: {
      control: { type: 'text' },
    },
    isValid: {
      control: { type: 'boolean' },
    },
    stepComplete: {
      control: { type: 'boolean' },
    },
  },
};

const Template = (args) => ({
  components: {
    BmsStep,
  },
  setup() {
    return { args };
  },
  template: `
    <BmsStep v-bind="args">
      <div>This is a step content</div>
      <template v-if="args.actionsSlot" #actions>
        <div>New actions</div>
      </template>
    </BmsStep>
  `,
});

export const Empty = Template.bind({});
Empty.args = {
  stepLabel: 'Label',
  stepComplete: 'false',
  previousLabel: '',
  nextLabel: '',
};

export const Default = Template.bind({});
Default.args = {
  stepLabel: 'Label',
  stepComplete: 'true',
};

export const Invalid = Template.bind({});
Invalid.args = {
  stepLabel: 'Label',
  stepComplete: 'true',
  previousLabel: 'Un autre bouton',
  nextLabel: 'Un bouton',
  isValid: false,
};

export const CustomActions = Template.bind({});
CustomActions.args = {
  stepLabel: 'Label',
  stepComplete: 'true',
  isValid: true,
  actionsSlot: true,
};
