import { storiesOf } from '@storybook/vue';
import itfApp from '../app/App.vue';
import itfButton from '../button/Button.vue';
import itfTab from './Tab.vue';
import itfTabContent from './TabContent.vue';
import itfTabs from './Tabs.vue';
import itfLabel from '../form/Label.vue';
import itfDatePicker from '../datepicker/DatePicker.vue';
import itfDateRangePicker from '../datepicker/DateRangePicker.vue';

storiesOf('Common', module)
  .add('Tabs', () => ({
    components: {
      itfApp,
      itfTabs,
      itfLabel,
      itfDatePicker,
      itfDateRangePicker,
      itfTab,
      itfTabContent,
      itfButton
    },
    data() {
      return {
        tab: 'Test1'
      }
    },
    methods: {
    },
    template: `<div>
      <p>You need wrap whole application with this tag</p>

      <h2>Usage</h2>
{{tab}}
<pre>
  &lt;itf-tabs v-model="tab">
    &lt;itf-tab id="Test1">
    asd
    </itf-tab>
  &lt;/itf-tabs>
</pre>

      <h3>Example</h3>

  <itf-tabs v-model="tab">
    <itf-tab id="Test1">
    Content 1
      <div class="text-muted">Coming soon...</div>
    </itf-tab>
    <itf-tab id="Test2">
    Content 2
    </itf-tab>
    <itf-tab id="Test3">
    Content 3
    </itf-tab>
    <itf-tab id="Test4">
    Content 4
    </itf-tab>
    <itf-tab-content id="Test1" filled>
    asd
    </itf-tab-content>
    <itf-tab-content id="Test2" filled>
    asd123
    </itf-tab-content>
  </itf-tabs>

  <itf-tabs v-model="tab" simple>
    <itf-tab id="Test1">
    Content 1
      <div class="text-muted">Coming soon...</div>
    </itf-tab>
    <itf-tab id="Test2">
    Content 2
    </itf-tab>
    <itf-tab id="Test3">
    Content 3
    </itf-tab>
    <itf-tab id="Test4">
    Content 4
    </itf-tab>
    <itf-tab-content id="Test1" filled>
    asd
    </itf-tab-content>
    <itf-tab-content id="Test2" filled>
    asd123
    </itf-tab-content>
  </itf-tabs>
    </div>`,
  }));
