import { storiesOf } from '@storybook/vue';
import itfSlider from './Slider.vue';
import itfSliderPanel from './SliderPanel.vue';
import itfDropdown from '../dropdown/Dropdown.vue';

storiesOf('Common', module)
  .add('Slider', () => ({
    components: {
      itfSlider,
      itfSliderPanel,
      itfDropdown
    },
    data() {
      return {
        from: '2021-01-16',
        to: null,
        dates: [],
        customDays: {
          '2021-10-21': { text: '🎉', class: 'test' }
        }
      }
    },
    methods: {
      submit() {
        this.$refs.form.doValidation();
      },
      reset() {
        this.$refs.form.resetValidation();
      }
    },
    template: `<div>
      <p>You need wrap whole application with this tag</p>

      <h2>Usage</h2>

  <pre>
  </pre>

      <h2>Example</h2>

      <button @click="$refs.slider.prev()">prev</button>
      <button @click="$refs.slider.next()">next</button>
      <button @click="$refs.slider.moveTo(0)">move to 0</button>


      <itf-slider ref="slider">
        <itf-slider-panel>1</itf-slider-panel>
        <itf-slider-panel>2</itf-slider-panel>
        <itf-slider-panel>3</itf-slider-panel>
      </itf-slider>

      <itf-dropdown autoclose="outside" :button-options="{ secondary: true }">
        <template #button>
          +
        </template>
        <itf-slider ref="slider2">
          <itf-slider-panel>
            <div>
                <div><a class="dropdown-item" href="#">Action</a></div>
            </div>
          </itf-slider-panel>
          <itf-slider-panel>2</itf-slider-panel>
          <itf-slider-panel>3</itf-slider-panel>
        </itf-slider>

        <button @click="$refs.slider2.prev()">prev</button>
        <button @click="$refs.slider2.next()">next</button>
        <button @click="$refs.slider2.moveTo(0)">move to 0</button>
      </itf-dropdown>
    </div>`,
  }));
