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

<Meta
  title='Components/SwitchButton'
  component={MSwitchButton}
  argTypes={{
    activeColor: { control: { type: 'color' } },
    inactiveColor: { control: { type: 'color' } },
    activeLabelColor: { control: { type: 'color' } },
    inactiveLabelColor: { control: { type: 'color' } },
  }}
/>

export const Template = (args, {argTypes}) => ({
  props: Object.keys(argTypes),
  components: { MSwitchButton },
  data() {
    return {
      option: false,
    }
  },
  template: `
  <div class="container-md p-md-5 p-4 bg-white">
    <m-switch-button
      v-model="option"
      :active-color="activeColor"
      :inactive-color="inactiveColor"
      :active-label-color="activeLabelColor"
      :inactive-label-color="inactiveLabelColor"
      :justify-content="justifyContent">
      {{ text  }}
    </m-switch-button>
  </div>`
});

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

### Default - Space Between

<Story
  name='Basic'
  args={{
    text: 'Configuracion numero 1'
  }}
  parameters={{
    storysource: { disabled: true }
  }}>
  {Template.bind({})}
</Story>

### Justified Center

<Story
  name='Justified Center'
  args={{
    text: 'Configuracion numero 2',
    justifyContent: 'center'
  }}
  parameters={{
    storysource: { disabled: true }
  }}>
  {Template.bind({})}
</Story>

<ArgsTable story="Basic" />

## Usage

1.- Import the component

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

2.- Register the component locally or globally

```javascript
{
  ...

  components: {
    MSwitchButton
  },

  ...
}
```

3.- Write your component implementation

```html
<m-switch-button v-model="switchValue">
  text
</m-switch-button>
```