<template>
  <div class="itf-monthpicker" :class="{'with-addon addon-start': prependIcon}">
    <div class="addon" v-if="prependIcon">
      <slot name="addon">
        <itf-icon :name="prependIcon" />
      </slot>
    </div>
    <input
      ref="input"
      readonly
      :disabled="disabled"
      class="form-control text-capitalize"
      :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
      @focus="onFocus"
      @blur="onBlur"
      :value="displayValue"
      :placeholder="placeholder"
    />
    <div style="display: none">
      <div ref="dropdown" class="itf-monthpicker__dropdown border rounded">
        <div>
          <itf-date-picker-inline
            :value="value"
            start-view="months"
            min-view="months"
            :min-date="minDate"
            :max-date="maxDate"
            only-calendar
            :display-format="displayFormat"
            :value-format="valueFormat"
            @input="selectInlineDate"
          />
        </div>
        <slot name="after-calendar" />
      </div>
    </div>
  </div>
</template>
<script>
import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
import { DateTime } from 'luxon';
import tippy from 'tippy.js';
import itfIcon from '../icon/Icon';
import itfDatePickerInline from './DatePickerInline.vue';

export default @Component({
  name: 'itfMonthPicker',
  components: {
    itfIcon,
    itfDatePickerInline
  },
})
class itfMonthPicker extends Vue {
  @Inject({ default: null }) itemLabel;

  @Prop({ type: String }) value;
  @Prop({ type: String }) customValue;
  @Prop({ type: Boolean }) disabled;
  @Prop({ type: String, default: 'ISO' }) valueFormat;
  @Prop({ type:  [String, Date], default: '' }) minDate;
  @Prop({ type:  [String, Date], default: '' }) maxDate;
  @Prop({ type: String, default: 'LLLL, yyyy' }) displayFormat;
  @Prop({ type: String, default: '' }) placeholder;
  @Prop({ type: String, default: '' }) prependIcon;
  @Prop({ type: String, default: 'bottom-start' }) placement;

  focused = false;

  tooltip = null;

  isInvalid() {
    return this.itemLabel && this.itemLabel.isHasError();
  }

  isSuccess() {
    return this.itemLabel && this.itemLabel.isHasSuccess();
  }

  mounted() {
    // якщо в модалці, то контекст модалки, якщо ні, то аплікейшена
    const context = this.$el.closest('.itf-append-context') || document.body;
    this.tooltip = tippy(this.$refs.input, {
      interactiveBorder: 30,
      interactiveDebounce: 75,
      animation: 'scale',
      arrow: true,
      content: this.$refs.dropdown,
      allowHTML: true,
      trigger: 'click',
      interactive: true,
      placement: this.placement,
      appendTo: context
    });
  }

  get valueAsLuxon() {
    if (!this.value) {
      return null;
    }
    if (this.valueFormat === 'ISO') {
      return DateTime.fromISO(this.value);
    }
    return DateTime.fromFormat(this.value, this.valueFormat);
  }

  get displayValue() {
    if (this.customValue) {
      return this.customValue;
    }
    if (!this.valueAsLuxon) {
      return '';
    }
    return this.valueAsLuxon.toFormat(this.displayFormat);
  }

  updateValue(value, emitEmpty = false) {
    const val = value && DateTime.fromFormat(value, this.displayFormat);
    if (!val || !val.isValid) {
      if (emitEmpty) {
        this.$emit('input', null);
      }
      return;
    }
    this.$emit('input', this.valueFormat === 'ISO' ? val.toISO() : val.toFormat(this.valueFormat));
  }

  format(date) {
    return DateTime.fromJSDate(date).toFormat(this.displayFormat);
  }

  parse(str) {
    return DateTime.fromFormat(str, this.displayFormat).toJSDate();
  }

  onFocus() {
    this.focused = true;
  }

  onBlur(e) {
    this.focused = false;
  }

  hide() {
    this.tooltip.hide();
  }

  selectInlineDate(date) {
    this.$emit('input', date);
    this.hide();
  }
}
</script>
