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

<Meta
  title='Components/Stepper'
  component={MStepper}
  parameters={{ controls: { sort: 'requiredFirst' } }}
  argTypes={{
    activeColor: {control:{type:'color'}},
    completedColor: {control:{type:'color'}},
    disabledColor: {control:{type:'color'}},
    defaultColor: {control:{type:'color'}},
    dividerColor: {control:{type:'color'}},
    labelColor: {control:{type:'color'}},
    labelSize: {control: {type: 'range', min: 0.1, max: 2, step: .1}}
  }}
/>

export const Template = (args, {argTypes}) => ({
  props: Object.keys(argTypes),
  components: { MStepper },
  data() {
    return {
      step: {
        value: 1,
        id: 'step-01',
      },
    }
  },
  template: `
  <div class="container-md p-md-5 p-4 bg-white">
    <m-stepper
      ref="stepper"
      v-model="step"
      class="mb-5"
      :steps="steps"
      :completed-message="completedMessage"
      :active-color="activeColor"
      :completed-color="completedColor"
      :disabled-color="disabledColor"
      :default-color="defaultColor"
      :divider-color="dividerColor"
      :label-color="labelColor"
      :with-divider="withDivider"
      :persist="persist"
      :storekeeper="storekeeper"
      :clickable="clickable"
      :debug="debug"
      :label-size="(labelSize/.365)+'rem'" />
    <div class="btn-group w-100">
      <button
        type="button"
        class="btn btn-primary"
        @click="$refs.stepper.previous()">
        Previous
      </button>
      <button
        type="button"
        class="btn btn-secondary"
        @click="$refs.stepper.next()">
        Next
      </button>
      <button
        type="button"
        class="btn btn-danger"
        @click="$refs.stepper.reset()">
        Reset
      </button>
      <button
        type="button"
        class="btn btn-dark"
        @click="$refs.stepper.complete()">
        Complete
      </button>
    </div>
  </div>`
});

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

### 4 Steps

<Story
  name='Basic'
  args={{
    clickable:true,
    steps: [
      {id: 1, title: "Title", subtitle: "subtitle"},
      {id: 2, title: "Title", subtitle: "subtitle"},
      {id: 3, title: "Title", subtitle: "subtitle"},
      {id: 4, title: "Title", subtitle: "subtitle"}
    ],
    labelSize: 1.25
  }}
  parameters={{
    storysource: { disabled: true }
  }}>
  {Template.bind({})}
</Story>


### 10 Steps

<Story
  name='10 Steps, only numbers'
  args={{
    clickable:true,
    steps: 10,
    labelSize: .6
  }}
  parameters={{
    storysource: { disabled: true }
  }}>
  {Template.bind({})}
</Story>

<ArgsTable story="Basic" />

## Usage

1.- Import the component

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

2.- Register the component locally or globally

```javascript
{
  ...
  components: {
    MStepper
  },
  ...
}
```

3.- Write your component implementation

```html
<m-stepper
  ref="stepper"
  v-model="step"
  :steps="4" />

<button @click="$refs.stepper.previous()">
  Previous
</button>

<button @click="$refs.stepper.next()">
  Next
</button>
```