import { storiesOf } from '@storybook/vue';
import itfApp from './App.vue';

storiesOf('Common', module)
  .add('Application', () => ({
    components: {
      itfApp
    },
    template: `<div>
      <p>You need wrap whole application with this tag</p>

      <h2>Usage</h2>

  <pre>

    &lt;itf-app ref="app">&lt;/com-app>

    &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">

        <button @click="$showSuccess('Success')">Show success</button>
        <button @click="$showError('Error')">Show error</button>
        <button @click="$showMessage({ title: 'New version released', message: 'Pss... Hey, we have released a new version of ITFin! Please refresh the page to reach out to new features.', button: 'Refresh', onClick: () => location.reload() })">Test message</button>
        <button @click="$try(() => { throw new Error('Invalid function'); })">Try function with error</button>

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