import { storiesOf } from '@storybook/vue';
import itfDropdown from './Dropdown.vue';
import itfIcon from '../icon/Icon.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';

storiesOf('Common', module)
  .add('Dropdown', () => ({
    components: {
      itfApp,
      itfForm,
      itfLabel,
      itfIcon,
      itfDropdown,
      itfDatePicker,
      itfDateRangePicker
    },
    data() {
      return {
        val: false
      }
    },
    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">

        {{val}}
        asdasdadasdb sahkjdnas jkdh jkdahsjdhasjh skjhdasda
        <itf-dropdown :visible.sync="val" right :button-options="{ primary: true }">
          <template #button>
            Offset
            <itf-icon name="filter" />
          </template>

            <div><a class="dropdown-item" href="#">Action</a></div>
            <div><a class="dropdown-item" href="#">Another action</a></div>
            <div><a class="dropdown-item" href="#">Something else here</a></div>
        </itf-dropdown>

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