import { storiesOf } from '@storybook/vue';
import itfModal from './Modal.vue';
import itfDeleteConfirmModal from './DeleteConfirmModal.vue';
import itfItemEditor from './ItemEditor.vue';
import itfForm from '../form/Form.vue';
import itfTextField from '../text-field/TextField.vue';
import itfLabel from '../form/Label.vue';
import itfApp from '../app/App.vue';

storiesOf('Common', module)
  .add('Modal', () => ({
    components: {
      itfApp,
      itfForm,
      itfLabel,
      itfModal,
      itfTextField,
      itfDeleteConfirmModal,
      itfItemEditor
    },
    data() {
      return {
        isVisible: false,
        isItemEdit: false,
        from: '2021-01-16',
        to: null,
        dates: [],
        customDays: {
          '2021-10-21': { text: '🎉', class: 'test' }
        }
      }
    },
    methods: {
      submit() {
        console.info('saved');
      },
      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>

      <itf-app ref="app">

        <itf-delete-confirm-modal></itf-delete-confirm-modal>

        <button @click="isItemEdit = !isItemEdit" class="btn btn-primary" type="button">Show item edit</button>
        <itf-item-editor v-model="isItemEdit" :save-func="submit" title="Edit item">
          <itf-text-field />
        </itf-item-editor>

        <button @click="isVisible = !isVisible" class="btn btn-primary" type="button">Show modal</button>
{{isVisible}}
        <itf-modal title="Test" :visible.sync="isVisible">

          <itf-form ref="form">

            <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 :rules="[$v.emptyValidation()]" label="Range" required>

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

            </itf-label>

            <button @click="submit" class="btn btn-primary" type="button">Submit</button>
            <button @click="reset" class="btn btn-secondary" type="button">Reset</button>

          </itf-form>

        </itf-modal>

      </itf-app>
    </div>`,
  }));
