import BmsTooltip from './BmsTooltip.vue';
import BmsSection from '../layout/BmsSection.vue';

export default {
  title: 'Composants/feedback/Tooltip',
  component: BmsTooltip,
};

const Template = (args) => ({
  components: {
    BmsTooltip,
    BmsSection,
  },
  setup() {
    return { args };
  },
  template: `
    <BmsSection :style="'border'">
      <div style="display: flex; gap:1em;"> 
        <BmsTooltip
          v-for="dir in ['bottom','right','left','top']" :key="dir"
          tooltipText="this my tooltip message"
          :direction="dir"
        >
          <div
            style="border: 1px solid var(--bms-grey-100);padding:5px;">
            anchor {{ dir }}
          </div>
       </BmsTooltip>
      </div>
    </BmsSection>
  `,
});

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

const TemplateSlot = (args) => ({
  components: {
    BmsTooltip,
    BmsSection,
  },
  setup() {
    return { args };
  },
  template: `
        <BmsTooltip :tooltip-text="args.tooltipText">
          <template #default>
            <div
              style="border: 1px solid var(--bms-grey-100);padding:5px;">
              anchor 
            </div>
          </template>
          <template #tooltipText v-if="!args.tooltipText">
            this is my <strong>tooltip</strong> with html <br/>
            and a line break
          </template>
       </BmsTooltip>
  `,
});
export const WithSlot = TemplateSlot.bind({});
WithSlot.args = {};

export const WithTooltipText = TemplateSlot.bind({});
WithTooltipText.args = { tooltipText: 'this is my tooltip' };
