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

storiesOf('Common', module)
  .add('Segmented Control', () => ({
    components: {
      itfApp,
      itfForm,
      itfLabel,
      itfButton,
      itfSegmentedControl,
      itfDatePicker,
      itfDateRangePicker
    },
    data() {
      return {
        value: 1,
        items: [
          { Text: 'FTE', Value: 1 },
          { Text: 'FTE3', Value: 3 },
          { Text: 'Test', Value: 4 },
          { Text: '%', Value: 2 },
        ]
      }
    },
    methods: {
    },
    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">
        <itf-segmented-control item-key="Value" item-text="Text" v-model="value" :items="items" />

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