import { storiesOf } from '@storybook/vue';
import itfDatePicker from './DatePicker.vue';
import itfMonthPicker from './MonthPicker.vue';
import itfPeriodPicker from './PeriodPicker';
import itfPeriodPickerInline from './PeriodPickerInline';
import itfDatePickerInline from './DatePickerInline.vue';
import itfDateRangePicker from './DateRangePicker.vue';
import itfDateRangePickerInline from './DateRangePickerInline.vue';
import itfApp from '../app/App.vue';

storiesOf('Common', module)
  .add('Datepicker', () => ({
    components: {
      itfApp,
      itfDatePicker,
      itfPeriodPicker,
      itfPeriodPickerInline,
      itfMonthPicker,
      itfDateRangePicker,
      itfDatePickerInline,
      itfDateRangePickerInline,
    },
    data() {
      return {
        date: null,// '2021-01-16',
        customDays: {
          '2021-10-21': { text: '🎉', class: 'test' }
        },
        dateRange: null,
        compareDateRange: null,
        month: '09-2021'
      }
    },
    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">

        {{date}}

        <br />
        <itf-date-picker-inline value-format="yyyy-MM-dd" :custom-days="customDays" :value="date" v-model.lazy="date"></itf-date-picker-inline>

        <itf-date-picker-inline value-format="yyyy-MM-dd" :custom-days="customDays" min-date="2023-05-01" :value="date" v-model.lazy="date"></itf-date-picker-inline>

        <br />
        <br />

        <itf-date-picker-inline value-format="yyyy-MM-dd" only-calendar :custom-days="customDays" :value="date" v-model.lazy="date"></itf-date-picker-inline>

        <br />
        <br />

        <itf-date-picker value-format="yyyy-MM-dd" :value="date"  clearable min-date="2023-05-01" v-model.lazy="date"></itf-date-picker>

        <br />
        <br />
        <itf-date-picker value-format="yyyy-MM-dd" start-view="years" only-calendar :value="date" v-model.lazy="date"></itf-date-picker>


        <h2>Range</h2>

        <itf-date-range-picker value-format="yyyy-MM-dd" min-date="2023-03-01" placeholder="loooooooooooooooong placeholder" v-model="dateRange"></itf-date-range-picker>

        <itf-date-range-picker-inline value-format="yyyy-MM-dd" v-model="dateRange" :range="compareDateRange"></itf-date-range-picker-inline>

        <itf-date-range-picker value-format="yyyy-MM-dd" min-date="2023-03-01" v-model="compareDateRange" :range="dateRange" compare></itf-date-range-picker>

        <h2>Month</h2>

        <itf-month-picker :value="month" v-model.lazy="month"></itf-month-picker>
        <br />
        <itf-month-picker clearable :value="month" v-model.lazy="month"></itf-month-picker>

        <h2>Period</h2>

        <itf-period-picker :value="dateRange" v-model.lazy="dateRange"></itf-period-picker>

        <itf-period-picker-inline :value="dateRange" v-model.lazy="dateRange"></itf-period-picker-inline>
      </itf-app>
    </div>`,
  }));
