import { storiesOf } from '@storybook/vue';
import itfPopover from './Popover.vue';
import itfConfirmPopover from './ConfirmPopover.vue';
import itfIconPopover from './IconPopover.vue';
import itfSelectPopover from './SelectPopover.vue';
import itfDeleteConfirmPopover from './DeleteConfirmPopover.vue';
import itfForm from '../form/Form.vue';
import itfButton from '../button/Button.vue';
import itfIcon from '../icon/Icon.vue';
import itfLabel from '../form/Label.vue';
import itfApp from '../app/App.vue';

storiesOf('Common', module)
  .add('Popover', () => ({
    components: {
      itfApp,
      itfIcon,
      itfForm,
      itfButton,
      itfLabel,
      itfPopover,
      itfIconPopover,
      itfSelectPopover,
      itfConfirmPopover,
      itfDeleteConfirmPopover
    },
    data() {
      return {
        icon: 'shuffle',
        isVisible: false,
        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>

      <itf-app ref="app">

        <div class="text-center">
        <itf-confirm-popover>
          <button slot="activator" class="btn btn-primary" type="button">Show modal</button>
        </itf-confirm-popover>

          <itf-icon-popover title="Icon" removable v-model="icon">
            <itf-button slot="activator" icon>
              <itf-icon :name="icon" />
            </itf-button>
          </itf-icon-popover>

          <itf-select-popover title="Icon" removable v-model="icon">
            <itf-button slot="activator" icon>
              <itf-icon :name="icon" />
            </itf-button>
          </itf-select-popover>

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