import Vue from 'vue';
import { mapGetters, mapMutations, mapState } from 'vuex';

Vue.mixin({
  computed: {
    ...mapGetters([
      "isLoading",
      "isLoggedIn",
      "isAdmin"
    ]),
    ...mapState([
      "user"
    ])
  },
  methods: {
    ...mapMutations([
      'setError',
      'setLoading'
    ]),

    loadResource(promise) {
      this.setLoading(true);

      return promise
        .catch(err => this.setError(err))
        .then(() => this.setLoading(false));
    }
  }
});

function clickStrikeClick(evt) {
  const isStrikable = el => el && el.tagName === "LI";
  const strikeClass = "is-strikethrough";

  let t = evt.target;

  while (t !== null && t !== this && !isStrikable(t)) {
    t = t.parentElement;
  }

  if (isStrikable(t)) {
    const classList = t.className.split(" ");
    const strIdx = classList.findIndex(c => c === strikeClass);
    if (strIdx >= 0) {
      classList.splice(strIdx, 1);
    } else {
      classList.push(strikeClass);
    }

    t.className = classList.join(" ");
  }
}

Vue.directive('click-strike', {
  bind(el) {
    el.addEventListener("click", clickStrikeClick);
  },

  unbind(el) {
    el.removeEventListener("click", clickStrikeClick);
  }
});