import { storiesOf } from '@storybook/vue';
import itfApp from '../app/App.vue';
import itfButton from '../button/Button.vue';
import itfStep from './Step.vue';
import itfWizard from './Wizard.vue';
import itfLabel from '../form/Label.vue';
import itfDatePicker from '../datepicker/DatePicker.vue';
import itfDateRangePicker from '../datepicker/DateRangePicker.vue';

storiesOf('Common', module)
  .add('Wizard', () => ({
    components: {
      itfWizard,
      itfLabel,
      itfDatePicker,
      itfDateRangePicker,
      itfStep,
      itfButton
    },
    data() {
      return {
        from: null,
        to: null,
        dates: [],
        currentState: {}
      }
    },
    methods: {
      runLoader() {
        this.$refs.wizard.setPending(true);
        setTimeout(() => {
          this.$refs.wizard.setPending(false);
        }, 5000);
      }
    },
    template: `<div>
      <p>You need wrap whole application with this tag</p>

      <h2>Usage</h2>

<pre>
  &lt;itf-table
    :columns="columns"
    :rows="list"
  >
    &lt;template #column.Employee="&#123; item }">&lt;/template>
  &lt;/itf-table>
</pre>

      <h3>Example</h3>

      <div class="container">
      {{currentState}}
      <itf-wizard
        ref="wizard"
        v-model="currentState"
      >
        <itf-step id="step1"
                  sidebar sidebar-title="Expertise" sidebar-icon="rating-activated"
                  card-title="Describe your expertise"
                  next-caption="Go ahead">

            <div class="row">
              <div class="col-6">
                <itf-label :rules="[$v.emptyValidation()]" :value="from" label="From" required>

                  <itf-date-picker start-view="years" only-calendar v-model="from"></itf-date-picker>

                </itf-label>
              </div>
              <div class="col-6">
                <itf-label :rules="[$v.emptyValidation()]" :value="to" label="To" required>

                  <itf-date-picker start-view="years" v-model="to"></itf-date-picker>

                </itf-label>
              </div>
            </div>

            <itf-label :value="dates[1]" :rules="[$v.emptyValidation()]" label="Range" required>

              <itf-date-range-picker v-model="dates"></itf-date-range-picker>

            </itf-label>

          <itf-button @click="runLoader">Loading</itf-button>
        </itf-step>
        <itf-step id="step2"
                  sidebar sidebar-title="Expertise2" sidebar-icon="rating-activated"
                  card-title="Describe your expertise"
                  next-caption="Go ahead">
          Test
        </itf-step>
      </itf-wizard>
      </div>
    </div>`,
  }));
