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

<Meta
  title='Components/ProgressBar'
  component={MProgressBar}
  argTypes={{
    percentage: {
      control: { type: 'range', min: 0, max: 100 }
    },
    backgroundColor: {
      control: { type: 'color' }
    },
    borderColor: {
      control: { type: 'color' }
    },
    fillColor: {
      control: { type: 'color' }
    },
    height: {
      control: { type: 'range', min: 0, max: 40 }
    },
    position: {
      control: { type: 'select', options: ['none','before','inside','after'] }
    }
  }}
/>

export const Template = (args, {argTypes}) => ({
  props: Object.keys(argTypes),
  components: { MProgressBar },
  template: `
  <div class="container-md p-md-5 p-4 bg-white">
    <m-progress-bar
      :percentage="percentage"
      :background-color="backgroundColor"
      :border-color="borderColor"
      :fill-color="fillColor"
      :height="height+'px'">
      <template #before="{percentage}" v-if="position==='before'">
        <small class="d-sm-block text-right mb-2">
          <i18n path="progress-message">
            <strong>{{ percentage }}</strong>
          </i18n>
        </small>
      </template>
      <template #inside v-else-if="position==='inside'">
        <span class="d-flex align-items-center justify-content-center text-white">150/200</span>
      </template>
      <template #after="{percentage}" v-else-if="position==='after'">
        <small class="d-sm-block text-right mt-2">
          <i18n path="progress-message">
            <strong>{{ percentage }}</strong>
          </i18n>
        </small>
      </template>
    </m-progress-bar>
  </div>`
});

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

### Minimal
<Story
  name='Minimal'
  args={{
    backgroundColor: '#333',
    borderColor: 'blue',
    fillColor: 'turquoise',
    percentage: 80,
    height: 12,
    position: ''
  }}
  parameters={{
    storysource: { disabled: true }
  }}>
  {Template.bind({})}
</Story>

### Text before progress

<Story
  name='Text before'
  args={{
    backgroundColor: '#FC224F',
    borderColor: 'blue',
    fillColor: 'white',
    percentage: 63,
    height: 10,
    position: 'before'
  }}
  parameters={{
    storysource: { disabled: true }
  }}>
  {Template.bind({})}
</Story>

### Text inside progress

<Story
  name='Text inside'
  args={{
    backgroundColor: '#50E3C2',
    borderColor: '#50E3C2',
    fillColor: '#B8E986',
    percentage: 63,
    height: 10,
    position: 'inside'
  }}
  parameters={{
    storysource: { disabled: true }
  }}>
  {Template.bind({})}
</Story>

### Text after progress

<Story
  name='Text after'
  args={{
    backgroundColor: '#4A90E2',
    borderColor: 'blue',
    fillColor: 'white',
    percentage: 63,
    height: 10,
    position: 'after'
  }}
  parameters={{
    storysource: { disabled: true }
  }}>
  {Template.bind({})}
</Story>

<ArgsTable story="Minimal" />

## Usage

1.- Import the component

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

2.- Register the component locally or globally

```javascript
{
  ...

  components: {
    MProgressBar
  },

  ...
}
```

3.- Write your component implementation

```html
<m-progress-bar :percentage="percentage" />
```