import { Meta, Story, Canvas, ArgsTable, Anchor } from '@storybook/addon-docs/blocks';
import TooltipIntroduction from './content/TooltipIntroduction.mdx';

import {
  iconColors,
  parametersDefault,
  argTypesDefault,
} from './config';

import MTooltip from '../../Tooltip';
import Vue from 'vue';
import MTooltipDirective from '../../../plugins/Tooltip';
Vue.use(MTooltipDirective);

<Meta title="Tooltip" component={MTooltip} />

export const DefaultExample = (args) => ({
  props:  Object.keys(argTypesDefault),
  components: { MTooltip },
  template: `
    <div class="text-center p-7">
      <m-tooltip
        :trigger="trigger"
        :placement="placement"
        :content="content"
        :target="target"
      />
      <button class="btn btn-primary" :id="target">Tooltip Activator</button>
    </div>
  `
});

# Tooltip

<TooltipIntroduction />

<Anchor storyId="tooltip--default-story"></Anchor>

## Default Tooltip

<Canvas>
  <Story
    name="Default"
    args={{
      content: 'Tooltip content',
      target: 'trigger-tooltip-1'
    }}
    argTypes={{ ...argTypesDefault }}
  >
    {DefaultExample.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Using Vue Directive

export const DirectiveExampleTemplate = `
<div class="text-center p-7">
  <button class="btn btn-primary" v-tooltip.click.top="'Tooltip Content'">Click Trigger</button>
  <button class="btn btn-primary" v-tooltip.hover.top-start="'Tooltip Content'">Hover Trigger</button>
</div>
`

export const DirectiveExample = (args) => ({
  template: DirectiveExampleTemplate
});

You can use `MTooltip` component using Vue directive from Mekari UI Vue. First, you need to import this:
```js
import Vue from 'vue';
import { MTooltipPlugin } from '@mekari/mekari-ui-vue';

Vue.use(MTooltipPlugin);
```

### Usage of Directive

The behavior of `MTooltip` will be the same just like the Default one. Tooltip can be placed on `top`, `right`, `bottom` and `left` of the tooltip activator, and can be triggered using `click` and `hover` event. While the tooltip activator in focus, the tooltip will never be hidden. After you import the directive to your application, you can add `v-tooltip` to your element. The `v-tooltip` has a `trigger` and `placement` options.
#### Trigger
- **Options**: [`click`, `hover`]
  - `v-tooltip.click`: The visibility of tooltip will be toggled when the trigger element is clicked.
  - `v-tooltip.hover`: The visibility of tooltip will be toggled when the trigger element is hovered.
---
#### Placement
- **Options**: [`top-start`, `top`, `top-end`, `right-start`, `right`, `right-end`, `bottom-start`, `bottom`, `bottom-end`, `left-start`, `left`, `left-end`]
  - `v-tooltip.top-start`: The position of the tooltip will on the top and start of the element trigger.
  - `v-tooltip.top`: The position of the tooltip will on the top and center of the element trigger.
- The placemenet is based on placement on [Popper.js](https://popper.js.org/).

You can combine the `trigger` and `placement` options on the directive. For example:
```js
<button class="btn btn-primary" v-tooltip.click.top="'Tooltip Content'">Hover Trigger</button>
// The button will toggle the visibility of the tooltip after the button is clicked
// The tooltip position will be on the top and center reltive to the button
```

Here is the preview of `MTooltip` using Vue directive:
<Canvas>
  <Story
    name="Using Vue Directive"
    parameters={{
      docs: {
        source: {
          code: DirectiveExampleTemplate
        }
      }
    }}
  >
    {DirectiveExample.bind({})}
  </Story>
</Canvas>