import { storiesOf } from '@storybook/vue';
import itfForm from './Form.vue';
import itfLabel from './Label.vue';
import itfButton from '../button/Button.vue';
import itfIcon from '../icon/Icon.vue';
import itfTextField from '../text-field/TextField.vue';
import itfDatePicker from '../datepicker/DatePicker.vue';
import itfSelect from '../select/Select.vue';
import itfDateRangePicker from '../datepicker/DateRangePicker.vue';
import itfApp from '../app/App.vue';

storiesOf('Common', module)
  .add('Form', () => ({
    components: {
      itfApp,
      itfIcon,
      itfButton,
      itfTextField,
      itfForm,
      itfLabel,
      itfSelect,
      itfDatePicker,
      itfDateRangePicker
    },
    data() {
      return {
        text: '',
        from: '2021-01-16',
        to: null,
        dates: [],
        customDays: {
          '2021-10-21': { text: '🎉', class: 'test' }
        }
      }
    },
    methods: {
      submit() {
        this.$refs.form.doValidation();
      },
      reset() {
        this.$refs.form.resetValidation();
      }
    },
    template: `<div>
      <itf-app ref="app">

      <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 ref="form">

          <itf-icon name="project_tnm" size="32" />
          <itf-icon name="project_fixed" size="32" class="color-income" />
          <itf-icon name="project_nonprofit" size="32" class="color-outcome" />

          <div class="row">
            <div class="col-12">
              <itf-label :rules="[$v.emptyValidation()]" :value="text" label="Text field" required>

                <itf-select
                  :options="['tnm', 'fixed', 'nonprofit']"
                  append-to-body
                  v-model="text">

                  <template #selected-option="{ option }">
                    <div class="d-flex align-items-center" v-if="option">
                      <itf-icon :class="\`color-project-\${option}\`" :name="\`project_\${option}\`" size="24" />
                      <div class="ps-2">
                        {{ option }}
                      </div>
                    </div>
                  </template>
                  <template #option="{ option }">
                    <div class="d-flex align-items-center" v-if="option">
                      <itf-icon :class="\`color-project-\${option}\`" :name="\`project_\${option}\`" size="24" />
                      <div class="ps-2">
                        {{ option }}
                      </div>
                    </div>
                  </template>
                </itf-select>

              </itf-label>
            </div>
            <div class="col-12">
              <itf-label :rules="[$v.emptyValidation()]" :value="text" label="Text field" required>

                  <itf-text-field v-model="text">
                    <template #addon>
                      <span class="input-group-text" id="basic-addon1">@</span>
                    </template>
                  </itf-text-field>

              </itf-label>
            </div>
            <div class="col-6">
              <itf-label :rules="[$v.emptyValidation()]" :value="from" label="From" required>

                <itf-date-picker start-view="years" only-calendar v-model="from"></itf-date-picker>

              </itf-label>
            </div>
            <div class="col-6">
              <itf-label :rules="[$v.emptyValidation()]" :value="to" label="To" required>

                <itf-date-picker start-view="years" v-model="to"></itf-date-picker>

              </itf-label>
            </div>
          </div>

          <div class="row">
            <div class="col-6">
              <itf-label :rules="[$v.emptyValidation()]" :value="from" label="Select" required>

                <itf-select clearable start-view="years" only-calendar v-model="from"></itf-select>

              </itf-label>
            </div>
            <div class="col-6">
              <itf-label :rules="[$v.emptyValidation()]" :value="to" label="Text" required>

                <itf-text-field prepend-icon="user"></itf-text-field>

              </itf-label>
            </div>
          </div>

          <itf-label :rules="[$v.emptyValidation()]" label="Range" required>

            <itf-date-range-picker v-model="dates"></itf-date-range-picker>

          </itf-label>

          <itf-button @click="submit" primary>Submit</itf-button>
          <itf-button @click="reset" secondary>Reset</itf-button>

        </itf-form>


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