import UiTooltip from './UiTooltip.vue';
import template from '@/documentation/template_internal_component.mdx';

export default {
  parameters: {
    docs: {
      page: template,
    },
  },
  tags: ['code-only'],
  title: 'Composants/feedback/UiTooltip',
  component: UiTooltip,
};

const Template = (args) => ({
  components: {
    UiTooltip,
  },
  setup() {
    return { args };
  },
  template: `
    <div
      style="border: 1px solid var(--bms-grey-100);position: absolute; top: 50px; left: 50px; width: 100px; height: 100px;">
      anchor
    </div>
    <UiTooltip v-bind="args">{{ args.tooltipText }}</UiTooltip>
  `,
});

export const Bottom = Template.bind({});
Bottom.args = {
  tooltipText: 'this is a longer tooltip',
  direction: 'bottom',
  getAnchorElementValues: () => ({
    top: 50,
    left: 50,
    width: 100,
    height: 100,
  }),
  visible: true,
};

export const Right = Template.bind({});
Right.args = {
  tooltipText: 'this is a longer tooltip',
  direction: 'right',
  getAnchorElementValues: () => ({
    top: 50,
    left: 50,
    width: 100,
    height: 100,
  }),
};

export const Left = Template.bind({});
Left.args = {
  tooltipText: 'this is a longer tooltip',
  direction: 'left',
  getAnchorElementValues: () => ({
    top: 50,
    left: 50,
    width: 100,
    height: 100,
  }),
};

export const Top = Template.bind({});
Top.args = {
  tooltipText: 'this is a longer tooltip',
  direction: 'top',
  getAnchorElementValues: () => ({
    top: 50,
    left: 50,
    width: 100,
    height: 100,
  }),
};
