import BmsButton from '@/components/button/BmsButton.vue';
import BmsIconButton from '@/components/button/BmsIconButton.vue';
import { Heart, ArrowLeft, ArrowRight } from 'lucide-vue-next';

const types = ['primary', 'secondary', 'tertiary'];
const modes = ['default', 'danger', 'warning'];

export default {
  title: 'Composants/button/Button',
  component: BmsButton,
};

const AllButtonsTemplate = () => ({
  components: {
    BmsButton,
    BmsIconButton,
    ArrowLeft,
    ArrowRight,
    Heart,
  },
  setup() {
    return { types, modes };
  },
  template: `
    <div style="display:grid;grid-template-columns:repeat(4, auto); gap:1em; justify-items: start; align-items: center;">
      <template v-for="mode in modes" :key="mode">
        <template v-for="type in types">
            <BmsButton :mode="mode" :type="type" small>
              Button {{ mode }} {{ type }}  small
            </BmsButton>
            <BmsButton :mode="mode" :type="type">
              Button {{ mode }} {{ type }} 
            </BmsButton>
            <BmsButton :mode="mode" :type="type" class="_hover">
              Button {{ mode }} {{ type }}   hovered
            </BmsButton>
            <BmsButton :mode="mode" :type="type" disabled>
              Button {{ mode }} {{ type }}  disabled
            </BmsButton>
        </template>
      </template>
      
      <BmsButton small>
        <template #start> <ArrowLeft/> </template>
          Button  small
        <template #end> <ArrowRight/> </template>
      </BmsButton>
      <BmsButton>
        <template #start> <ArrowLeft/> </template>
          Button 
        <template #end> <ArrowRight/> </template>
      </BmsButton>
      <BmsButton class="_hover">
        <template #start> <ArrowLeft/> </template>
          Button hovered
        <template #end> <ArrowRight/> </template>
      </BmsButton>
      <BmsButton disabled>
        <template #start> <ArrowLeft/> </template>
          Button disabled
        <template #end> <ArrowRight/> </template>
      </BmsButton>


      <template v-for="mode in modes" :key="mode">
        <BmsIconButton v-bind="args" :mode="mode" small>
          <Heart />
        </BmsIconButton>
        <BmsIconButton v-bind="args" :mode="mode">
          <Heart />
        </BmsIconButton>
        <BmsIconButton v-bind="args" :mode="mode" class="_hover">
          <Heart />
        </BmsIconButton>
        <BmsIconButton v-bind="args" :mode="mode" disabled>
          <Heart />
        </BmsIconButton>
      </template>
    </div>
  `,
});

export const AllButtons = AllButtonsTemplate.bind({});
