import { storiesOf } from '@storybook/vue';
import itfButton from './Button.vue';
import itfForm from '../form/Form.vue';
import itfLabel from '../form/Label.vue';
import itfDatePicker from '../datepicker/DatePicker.vue';
import itfDateRangePicker from '../datepicker/DateRangePicker.vue';
import itfApp from '../app/App.vue';
// import {Button} from './Button.js';

// window.customElements.define('itf-button', Button);


storiesOf('Common', module)
  .add('Buttons', () => ({
    components: {
      itfButton,
      itfApp,
      itfForm,
      itfLabel,
      itfDatePicker,
      itfDateRangePicker
    },
    data() {
      return {
        isLoading: false,
        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();
      },
      testLoading() {
        this.isLoading = true;
        setTimeout(() => {
          this.isLoading = false;
        }, 5000);
      }
    },
    template: `<div>
      <p>You need wrap whole application with this tag</p>

      <h2>Usage</h2>

  <pre>

    &lt;itf-datepicker>&lt;/itf-datepicker>

    &lt;button @click="$showSuccess('Success')">Show success&lt;/button>
    &lt;button @click="$showError('Error')">Show error&lt;/button>
    &lt;button @click="$try(() => { throw new Error('Invalid function'); })">Try function with error&lt;/button>
  </pre>

      <h2>Example</h2>

      <itf-app ref="app">

        <h3>Standart button</h3>

        <itf-button squircle primary>Primary button</itf-button>
        <itf-button secondary>Secondary button</itf-button>
        <itf-button>Basic button</itf-button>
        <itf-button icon>
          <div class="btn-close"></div>
        </itf-button>
        <itf-button icon>
          <svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor" fill-rule="evenodd"><circle cx="10.5" cy="10.5" r="1"/><circle cx="5.5" cy="10.5" r="1"/><circle cx="15.5" cy="10.5" r="1"/></g></svg>
        </itf-button>


        <h3>Small button</h3>

        <itf-button small primary>Primary button</itf-button>
        <itf-button small secondary>Secondary button</itf-button>
        <itf-button small>Basic button</itf-button>
        <itf-button small icon>
          <div class="btn-close"></div>
        </itf-button>
        <itf-button small icon>
          <svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor" fill-rule="evenodd"><circle cx="10.5" cy="10.5" r="1"/><circle cx="5.5" cy="10.5" r="1"/><circle cx="15.5" cy="10.5" r="1"/></g></svg>
        </itf-button>


        <h3>Large button</h3>

        <itf-button squircle large primary>Primary button</itf-button>
        <itf-button large secondary>Secondary button</itf-button>
        <itf-button large>Basic button</itf-button>
        <itf-button large icon>
          <div class="btn-close"></div>
        </itf-button>
        <itf-button large icon>
          <svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor" fill-rule="evenodd"><circle cx="10.5" cy="10.5" r="1"/><circle cx="5.5" cy="10.5" r="1"/><circle cx="15.5" cy="10.5" r="1"/></g></svg>
        </itf-button>

        <h3>Loading button</h3>

        <itf-button primary loading>Primary button</itf-button>
        <itf-button secondary loading>Secondary button</itf-button>
        <itf-button loading>Basic button</itf-button>
        <itf-button primary loading small loading-text="Loading...">Small button</itf-button>
        <itf-button primary loading large>Large button</itf-button>

        <h4>Test loading</h4>
{{isLoading}}
        <itf-button onclick="testLoading" primary :loading.prop="isLoading" loading-text="Saving...">Click to test loading</itf-button>

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