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

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

import MPopover from '../../Popover';
import Vue from 'vue';
import MPopoverDirective from '../../../plugins/Popover';
Vue.use(MPopoverDirective);

<Meta title="Popover" component={MPopover} />

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

# Popover

<PopoverIntroduction />

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

## Default Popover

<Canvas>
  <Story
    name="Default"
    args={{
      content: 'Popover content',
      target: 'popover-example-1'
    }}
    argTypes={{ ...argTypesDefault }}
    parameters={{ ...parametersDefault }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Using Vue Directive

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

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

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

Vue.use(MPopoverPlugin);
```

### Usage of Directive

The behavior of `MPopover` will be the same just like the Default one. Popover can be placed on `top`, `right`, `bottom` and `left` of the popover activator, and can be triggered using `click` and `hover` event. After you import the directive to your application, you can add `v-popover` to your element. The `v-popover` has a `trigger` and `placement` options.
#### Trigger
- **Options**: [`click`, `hover`]
  - `v-popover.click`: The visibility of popover will be toggled when the trigger element is clicked.
  - `v-popover.hover`: The visibility of popover 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-popover.top-start`: The position of the popover will on the top and start of the element trigger.
  - `v-popover.top`: The position of the popover 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-popover.click.top="'Popover Content'">Hover Trigger</button>
// The button will toggle the visibility of the popover after the button is clicked
// The popover position will be on the top and center reltive to the button
```

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