import "../../../../src/components/VDatePicker/VDatePickerTable.sass"; // Directives

import Touch from '../../../directives/touch'; // Mixins

import Colorable from '../../../mixins/colorable';
import Localable from '../../../mixins/localable';
import Themeable from '../../../mixins/themeable'; // Utils

import isDateAllowed from '../util/isDateAllowed';
import mixins from '../../../util/mixins';
export default mixins(Colorable, Localable, Themeable
/* @vue/component */
).extend({
  directives: {
    Touch
  },
  props: {
    allowedDates: Function,
    current: String,
    disabled: Boolean,
    format: Function,
    events: {
      type: [Array, Function, Object],
      default: () => null
    },
    eventColor: {
      type: [Array, Function, Object, String],
      default: () => 'warning'
    },
    min: String,
    max: String,
    readonly: Boolean,
    scrollable: Boolean,
    tableDate: {
      type: String,
      required: true
    },
    value: [String, Array]
  },
  data: () => ({
    isReversing: false
  }),
  computed: {
    computedTransition() {
      return this.isReversing === !this.$vuetify.rtl ? 'tab-reverse-transition' : 'tab-transition';
    },

    displayedMonth() {
      return Number(this.tableDate.split('-')[1]) - 1;
    },

    displayedYear() {
      return Number(this.tableDate.split('-')[0]);
    }

  },
  watch: {
    tableDate(newVal, oldVal) {
      this.isReversing = newVal < oldVal;
    }

  },
  methods: {
    genButtonClasses(isAllowed, isFloating, isSelected, isCurrent) {
      return {
        'v-size--default': !isFloating,
        'v-btn--active': isSelected,
        'v-btn--flat': !isAllowed || this.disabled,
        'v-btn--text': isSelected === isCurrent,
        'v-btn--rounded': isFloating,
        'v-btn--disabled': !isAllowed || this.disabled,
        'v-btn--outlined': isCurrent && !isSelected,
        ...this.themeClasses
      };
    },

    genButtonEvents(value, isAllowed, mouseEventType) {
      if (this.disabled) return undefined;
      return {
        click: () => {
          isAllowed && !this.readonly && this.$emit('input', value);
          this.$emit(`click:${mouseEventType}`, value);
        },
        dblclick: () => this.$emit(`dblclick:${mouseEventType}`, value)
      };
    },

    genButton(value, isFloating, mouseEventType, formatter) {
      const isAllowed = isDateAllowed(value, this.min, this.max, this.allowedDates);
      const isSelected = value === this.value || Array.isArray(this.value) && this.value.indexOf(value) !== -1;
      const isCurrent = value === this.current;
      const setColor = isSelected ? this.setBackgroundColor : this.setTextColor;
      const color = (isSelected || isCurrent) && (this.color || 'accent');
      return this.$createElement('button', setColor(color, {
        staticClass: 'v-btn',
        class: this.genButtonClasses(isAllowed, isFloating, isSelected, isCurrent),
        attrs: {
          type: 'button'
        },
        domProps: {
          disabled: this.disabled || !isAllowed
        },
        on: this.genButtonEvents(value, isAllowed, mouseEventType)
      }), [this.$createElement('div', {
        staticClass: 'v-btn__content'
      }, [formatter(value)]), this.genEvents(value)]);
    },

    getEventColors(date) {
      const arrayize = v => Array.isArray(v) ? v : [v];

      let eventData;
      let eventColors = [];

      if (Array.isArray(this.events)) {
        eventData = this.events.includes(date);
      } else if (this.events instanceof Function) {
        eventData = this.events(date) || false;
      } else if (this.events) {
        eventData = this.events[date] || false;
      } else {
        eventData = false;
      }

      if (!eventData) {
        return [];
      } else if (eventData !== true) {
        eventColors = arrayize(eventData);
      } else if (typeof this.eventColor === 'string') {
        eventColors = [this.eventColor];
      } else if (typeof this.eventColor === 'function') {
        eventColors = arrayize(this.eventColor(date));
      } else if (Array.isArray(this.eventColor)) {
        eventColors = this.eventColor;
      } else {
        eventColors = arrayize(this.eventColor[date]);
      }

      return eventColors.filter(v => v);
    },

    genEvents(date) {
      const eventColors = this.getEventColors(date);
      return eventColors.length ? this.$createElement('div', {
        staticClass: 'v-date-picker-table__events'
      }, eventColors.map(color => this.$createElement('div', this.setBackgroundColor(color)))) : null;
    },

    wheel(e, calculateTableDate) {
      e.preventDefault();
      this.$emit('update:table-date', calculateTableDate(e.deltaY));
    },

    touch(value, calculateTableDate) {
      this.$emit('update:table-date', calculateTableDate(value));
    },

    genTable(staticClass, children, calculateTableDate) {
      const transition = this.$createElement('transition', {
        props: {
          name: this.computedTransition
        }
      }, [this.$createElement('table', {
        key: this.tableDate
      }, children)]);
      const touchDirective = {
        name: 'touch',
        value: {
          left: e => e.offsetX < -15 && this.touch(1, calculateTableDate),
          right: e => e.offsetX > 15 && this.touch(-1, calculateTableDate)
        }
      };
      return this.$createElement('div', {
        staticClass,
        class: {
          'v-date-picker-table--disabled': this.disabled,
          ...this.themeClasses
        },
        on: !this.disabled && this.scrollable ? {
          wheel: e => this.wheel(e, calculateTableDate)
        } : undefined,
        directives: [touchDirective]
      }, [transition]);
    }

  }
});
//# sourceMappingURL=date-picker-table.js.map