<template>
  <div>
    <div class="row mb-3">
      <div class="col">
        <itf-button icon @click="setYear(prevYear)">
          <itf-icon name="chevron_left" />
        </itf-button>
      </div>
      <div class="col">
        <itf-button block @click="setYear(prevYear)">
          {{prevYear}}
        </itf-button>
      </div>
      <div class="col">
        <itf-button color="outline-primary" block>
          {{year}}
        </itf-button>
      </div>
      <div class="col">
        <itf-button block @click="setYear(nextYear)">
          {{nextYear}}
        </itf-button>
      </div>
      <div class="col text-end">
        <itf-button icon @click="setYear(nextYear)">
          <itf-icon name="chevron_right" />
        </itf-button>
      </div>
    </div>

    <itf-button block class="mb-3" :class="{'btn-whole': !isCurrentYear()}" :primary="isCurrentYear()" @click="onYearSelect(year)">
      {{ $t('components.wholeYear') }}
    </itf-button>

    <div class="itf-periodpicker__quarters">
      <div
        v-for="quarter of quarters"
        :key="quarter.Number"
        class="itf-periodpicker__quarter"
        :class="{ 'active': isOnlyQuarter(quarter.Number), 'active-inside': isCurrentQuarter(quarter.Number) }">
        <div class="px-3 pt-2" @click="onQuarterSelect([quarter.Months[0], quarter.Months[2]])">
          <small><b>{{ $t('components.quarter') }}</b></small><br>
          <span class="quarter-number">{{ quarter.Number }}</span>
        </div>

        <div class="itf-periodpicker__months">
          <itf-button
            class="itf-periodpicker__month px-1"
            v-for="month of quarter.Months"
            :key="month"
            :primary="isCurrentMonth(month)"
            @click="onMonthSelect(month)"
          >
            {{ month | formatMonth }}
          </itf-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Vue, Component, Prop } from 'vue-property-decorator';
import { DateTime } from 'luxon';
import itfIcon from '../icon/Icon';
import itfButton from '../button/Button';

export default @Component({
  name: 'itfPeriodPickerInline',
  components: {
    itfIcon,
    itfButton
  },
  filters: {
    formatMonth(month) {
      return DateTime.local().set({ month }).toFormat('MMM');
    }
  }
})
class itfPeriodPickerInline extends Vue {
  @Prop({ type: Array }) value;
  @Prop({ type: String, default: 'ISO' }) valueFormat;

  year = null;

  get quarters() {
    return [
      { Name: `${this.$t('components.quarter')} 1`, Months: [1, 2, 3], Number: 1 },
      { Name: `${this.$t('components.quarter')} 2`, Months: [4, 5, 6], Number: 2 },
      { Name: `${this.$t('components.quarter')} 3`, Months: [7, 8, 9], Number: 3 },
      { Name: `${this.$t('components.quarter')} 4`, Months: [10, 11, 12], Number: 4 },
    ];
  }

  get nextYear() {
    return this.year + 1;
  }

  get prevYear() {
    return this.year - 1;
  }

  setYear(year) {
    this.year = year;
  }

  mounted() {
    this.year = (this.value && this.value[0]) ? this.valueAsLuxon[0].year : DateTime.local().year;
  }

  get valueAsLuxon() {
    if (!this.value || this.value.length < 2) {
      return null;
    }
    if (this.valueFormat === 'ISO') {
      return [
        DateTime.fromISO(this.value[0]),
        DateTime.fromISO(this.value[1]),
      ];
    }
    return [
      DateTime.fromFormat(this.value[0], this.valueFormat),
      DateTime.fromFormat(this.value[1], this.valueFormat),
    ];
  }

  isCurrentMonth(month) {
    if (!this.valueAsLuxon) {
      return false;
    }
    return Number(this.valueAsLuxon[0].toFormat('M')) === month && Number(this.valueAsLuxon[1].toFormat('M')) === month;
  }

  isOnlyQuarter(quarter) {
    if (!this.valueAsLuxon) {
      return false;
    }
    return this.isCurrentQuarter(quarter) && this.valueAsLuxon[0].month !== this.valueAsLuxon[1].month;
  }

  isCurrentQuarter(quarter) {
    if (!this.valueAsLuxon) {
      return false;
    }
    return this.valueAsLuxon[0].quarter === quarter && this.valueAsLuxon[1].quarter === quarter;
  }

  isCurrentYear() {
    if (!this.valueAsLuxon) {
      return false;
    }
    return this.valueAsLuxon[0].hasSame(this.valueAsLuxon[0].startOf('year'), 'day')
      && this.valueAsLuxon[1].hasSame(this.valueAsLuxon[0].endOf('year'), 'day');
  }

  updateValue(start, end) {
    if (!start) {
      this.$emit('input', []);
      return;
    }
    this.$emit('input', [
      (this.valueFormat === 'ISO') ? start.toISO() : start.toFormat(this.valueFormat),
      (this.valueFormat === 'ISO') ? end.toISO() : end.toFormat(this.valueFormat),
    ]);
  }

  onYearSelect(year) {
    this.updateValue(
      DateTime.local().set({ year }).startOf('year'),
      DateTime.local().set({ year }).endOf('year'),
    );
  }

  onMonthSelect(month) {
    this.updateValue(
      DateTime.local().set({ month, year: this.year }).startOf('month'),
      DateTime.local().set({ month, year: this.year }).endOf('month'),
    );
  }

  onQuarterSelect([startMonth, endMonth]) {
    this.updateValue(
      DateTime.local().set({ month: startMonth, year: this.year }).startOf('quarter'),
      DateTime.local().set({ month: endMonth, year: this.year }).endOf('quarter'),
    );
  }
}
</script>
