import "../../../src/components/VDatePicker/VDatePickerYears.sass"; // Mixins

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

import { createNativeLocaleFormatter } from './util';
import mixins from '../../util/mixins';
export default mixins(Colorable, Localable
/* @vue/component */
).extend({
  name: 'v-date-picker-years',
  props: {
    format: Function,
    min: [Number, String],
    max: [Number, String],
    readonly: Boolean,
    value: [Number, String]
  },

  data() {
    return {
      defaultColor: 'primary'
    };
  },

  computed: {
    formatter() {
      return this.format || createNativeLocaleFormatter(this.currentLocale, {
        year: 'numeric',
        timeZone: 'UTC'
      }, {
        length: 4
      });
    }

  },

  mounted() {
    setTimeout(() => {
      const activeItem = this.$el.getElementsByClassName('active')[0];

      if (activeItem) {
        this.$el.scrollTop = activeItem.offsetTop - this.$el.offsetHeight / 2 + activeItem.offsetHeight / 2;
      } else {
        this.$el.scrollTop = this.$el.scrollHeight / 2 - this.$el.offsetHeight / 2;
      }
    });
  },

  methods: {
    genYearItem(year) {
      const formatted = this.formatter(`${year}`);
      const active = parseInt(this.value, 10) === year;
      const color = active && (this.color || 'primary');
      return this.$createElement('li', this.setTextColor(color, {
        key: year,
        class: {
          active
        },
        on: {
          click: () => this.$emit('input', year)
        }
      }), formatted);
    },

    genYearItems() {
      const children = [];
      const selectedYear = this.value ? parseInt(this.value, 10) : new Date().getFullYear();
      const maxYear = this.max ? parseInt(this.max, 10) : selectedYear + 100;
      const minYear = Math.min(maxYear, this.min ? parseInt(this.min, 10) : selectedYear - 100);

      for (let year = maxYear; year >= minYear; year--) {
        children.push(this.genYearItem(year));
      }

      return children;
    }

  },

  render() {
    return this.$createElement('ul', {
      staticClass: 'v-date-picker-years',
      ref: 'years'
    }, this.genYearItems());
  }

});
//# sourceMappingURL=VDatePickerYears.js.map