import { Meta, Story, ArgsTable, Title, Subtitle, Description } from '@storybook/addon-docs/blocks';
import MDrawer from './index.vue';

<Meta
  title='Components/Drawer'
  component={MDrawer}
  argTypes={{
    width: { control: { type: 'range', min: 0, max: 100 } },
    height: { control: { type: 'range', min: 0, max: 100 } },
    openOn: { control: { type: 'select', options: ['left', 'right', 'top', 'bottom'] }}
  }}
/>

export const Template = (args, {argTypes}) => ({
  props: Object.keys(argTypes),
  components: { MDrawer },
  template: `
  <div class="container-md p-md-5 p-4 bg-white">
    <button
      class="btn btn-dark"
      @click="()=>$refs.slidePanel.openDrawer()">
      Open {{ openOn }}
    </button>
    <m-drawer
      ref="slidePanel"
      :width="width+'%'"
      :height="height+'%'"
      :classes="classes"
      :open-on="openOn"
      :remove-bg="removeBg"
      :transparent-bg="transparentBg"
      :disable-bg-click="disableBgClick"
      :disable-esc-click="disableEscClick"
      :close-icon="closeIcon">
      <h1>The drawer panel</h1>
      <button
        class="btn btn-dark mt-4"
        @click="()=>$refs.slidePanel.closeDrawer()">
        Close Drawer
      </button>
    </m-drawer>
  </div>`
});

<Title />
<Subtitle />
<Description />

### Open left example

<Story
  name='Left'
  args={{
    openOn: 'left',
  }}
  parameters={{
    storysource: { disabled: true }
  }}>
  {Template.bind({})}
</Story>

### Open right example

<Story
  name='Right'
  args={{
    openOn: 'right',
  }}
  parameters={{
    storysource: { disabled: true }
  }}>
  {Template.bind({})}
</Story>

### Open top example

<Story
  name='Top'
  args={{
    openOn: 'top',
  }}
  parameters={{
    storysource: { disabled: true }
  }}>
  {Template.bind({})}
</Story>

### Open bottom example

<Story
  name='Bottom'
  args={{
    openOn: 'bottom',
  }}
  parameters={{
    storysource: { disabled: true }
  }}>
  {Template.bind({})}
</Story>

<ArgsTable story="Left" />

## Public Methods

### openDrawer()
Opens the drawer. E.g. `$refs.yourComponentRef.openDrawer()`

### closeDrawer()
Closes the drawer. E.g. `$refs.yourComponentRef.closeDrawer()`

## Usage

1.- Import the component

```javascript
import { MDrawer } from '@modyo/financial-commons';
```

2.- Register the component locally or globally

```javascript
{
  ...

  components: {
    MDrawer
  },

  ...
}
```

3.- Write your component implementation

```html
<m-drawer ref="slidePanel">
Content of the panel
</m-drawer>

<button
  @click="()=>$refs.slidePanel.openDrawer()">
  Open Drawer
</button>
```