import { storiesOf } from '@storybook/vue';
import itfCheckbox from './Checkbox';
import itfCheckboxGroup from './CheckboxGroup';
import itfRadioGroup from './RadioGroup';
import itfRadioBox from './RadioBox';
import itfForm from '../form/Form.vue';
import itfLabel from '../form/Label.vue';
import itfApp from '../app/App.vue';

storiesOf('Common', module)
  .add('Checkbox', () => ({
    components: {
      itfApp,
      itfCheckbox,
      itfCheckboxGroup,
      itfForm,
      itfLabel,
      itfRadioGroup,
      itfRadioBox,
    },
    data() {
      return {
        test: false,
        group: [],
        radioValue: null
      }
    },
    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-form>
      <itf-checkbox label="Test" v-model="test" />

      <itf-checkbox switch label="Test" v-model="test" />
        {{test}}

        <itf-checkbox-group v-model="group">
          <itf-checkbox label="Test1" value="1" />
          <itf-checkbox label="Test2" value="2" />
        </itf-checkbox-group>

        {{group}}

        <h3>Medium</h3>
        <itf-checkbox medium label="Test" v-model="test" />

        <itf-checkbox medium switch label="Test" v-model="test" />



        <h3>Large</h3>
        <itf-checkbox large label="Test" v-model="test" />

        <itf-checkbox large switch label="Test" v-model="test" />


        <h3>Radio box</h3>

        <p>Value: {{radioValue}}</p>
        <itf-radio-group v-model="radioValue">

          <itf-radio-box :value="1">
            <h4>Test</h4>
            <div class="text-muted">Шаблон для відпусток</div>
          </itf-radio-box>

          <itf-radio-box :value="2">
            <h4>Test2</h4>
            <div class="text-muted">Шаблон для лікарняних</div>
          </itf-radio-box>

        </itf-radio-group>


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