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

<Meta
  title='Components/FullStepper'
  component={MFullStepper}
  argTypes={{
    lightColor: {
      control: { type: 'color' }
    },
    darkColor: {
      control: { type: 'color' }
    }
  }}
/>

export const Template = (args, {argTypes}) => ({
  props: Object.keys(argTypes),
  components: { MFullStepper },
  template: `
  <div class="container-md p-md-5 p-4 bg-white">
    <m-full-stepper
      class="shadow"
      :class="classes"
      :main-title="mainTitle"
      :steps="steps"
      :step-index="stepIndex"
      :show-custom-submit-mobile="showCustomSubmitMobile"
      :light-color="lightColor"
      :dark-color="darkColor">
      <template #step-1>
        <div class="container">
          <p class="text-center bg-secondary rounded-lg text-white p-5 mt-4 mb-5 col-sm-4 mx-auto">Content of the step 1 as #step-1 slot</p>
        </div>
      </template>
      <template #step-2>
        <div class="container">
          <p class="text-center bg-dark rounded-lg text-white p-5 mt-4 mb-5 col-sm-4 mx-auto">Content of the step 2 as #step-2 slot</p>
        </div>
      </template>
    </m-full-stepper>
  </div>`
});

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

<Story
  name='Basic'
  args={{
    mainTitle:"Stepper Title",
    steps:[
      {
        title: 'Step 1 Title'
      },
      {
        title: 'Step 2 Title'
      }
    ],
    classes:''
  }}
  parameters={{
    storysource: { disabled: true }
  }}>
  {Template.bind({})}
</Story>

<ArgsTable story="Basic" />

## Usage

1.- Import the component

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

2.- Register the component locally or globally

```javascript
{
  ...

  components: {
    MFullStepper
  },

  ...
}
```

3.- Write your component implementation

```html
<m-full-stepper
  main-title="The Title"
  :steps="[
    {
      title: 'Step 1 Title'
    },
    {
      title: 'Step 2 Title'
    }
  ]"
  @on-save="save"
  @on-exit="exit"
  @on-submit="submit">
  <template #step-1>
    <p>Content of the step 1 as #step-1 slot</p>
  </template>
  <template #step-2>
    <p>Content of the step 2 as #step-2 slot</p>
  </template>
</m-full-stepper>
```

<div class="alert alert-info">
  <strong>Note:</strong> The <code>main-title</code> and <code>steps</code> must be given by props as required props. For each step title must be a template that will fill the step slot.
</div>