import { storiesOf } from '@storybook/vue';
import itfSelect from './Select.vue';
import itfDropdown from './Dropdown';
import itfSelect2 from './AirSelect';
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('Select', () => ({
    components: {
      itfApp,
      itfForm,
      itfLabel,
      itfButton,
      itfSelect,
      itfSelect2,
      itfDropdown,
      itfDatePicker,
      itfDateRangePicker
    },
    data() {
      return {
        isVisible: false,
        from: '2021-01-16',
        to: null,
        selected: 'UA',
        selectedArr: ['US'],
        dates: [],
        customDays: {
          '2021-10-21': { text: '🎉', class: 'test' }
        },
        value: [],
        countries: [
          {code: 'CA', country: 'Canada'},
          {code: 'US', country: 'United states'},
          {code: 'UA', country: 'Ukraine'},
          {code: 'TEST', country: 'ASdasd sdas dasd sad sadas da ad asdsad ad d ada dsadsadsadasd sadsa das dasd asdasd asdas da '}
        ],
        issuePriorityOptions: [
          { label: 'High', value: 1 },
          { label: 'Low', value: 2 }
        ]
      }
    },
    methods: {
      submit() {
        this.$refs.form.doValidation();
      },
      reset() {
        this.$refs.form.resetValidation();
      }
    },
    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-form ref="form">

          <itf-select2
            multiple
            searchable
            variant="normal"
            :dropdownWidth="300"
            v-model="value"
            :options="issuePriorityOptions"
            customRender
          >
            <template #default="{ label, icon, color }">
              <itf-button secondary>
                <div class="flex items-center">
                  <div class="pr-1 pl-2">
                    {{ label }}
                  </div>
                </div>
              </itf-button>
            </template>
          </itf-select2>
          <div class="row">
            <div class="col-6">
              <itf-label :rules="[$v.emptyValidation()]" :value="selected" label="From" required>

                {{ selected }}

                <itf-select
                  placeholder="Country"
                  :reduce="country => country.code"
                  v-model="selected" label="country" :options="countries"></itf-select>

                <itf-select
                  loading
                  placeholder="Country"
                  :reduce="country => country.code"
                  v-model="selected" label="country" :options="countries"></itf-select>

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

                {{ selectedArr }}

                <itf-select
                  taggable multiple push-tags
                  :reduce="country => country.code"
                  :create-option="text => ({ country: text, code: text })"
                  v-model="selectedArr" label="country" :options="countries">
                  <template #option="{ option }">
                    {{ option }}
                  </template>
                  <template #no-options="{ search, searching }">
                    <template v-if="searching">
                      No results found for <em>{{ search }}</em
                    >.
                    </template>
                    <em v-else style="opacity: 0.5">Start typing to search for a country.</em>
                  </template>
                </itf-select>

              </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>

          <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>`,
  }));
