import { mapActions, mapState } from "pinia";
import { useAppConfigStore } from "../stores/appConfig";

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(" ");
  }
}

export function installMixins(app) {
  app.directive('click-strike', {
    beforeMount(el) {
      el.addEventListener("click", clickStrikeClick);
    },

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

  app.mixin({
    data() {
      return {
        localLoadingCount: 0
      };
    },

    computed: {
      ...mapState(useAppConfigStore, [
        "isLoading",
        "isLoggedIn",
        "isAdmin",
        "user"
      ]),

      localLoading() {
        return this.localLoadingCount > 0;
      }
    },
    methods: {
      ...mapActions(useAppConfigStore, [
        'setError',
        'setLoading',
        'updateCurrentUser'
      ]),

      loadResource(promise) {
        this.setLoading(true);
        this.localLoadingCount = this.localLoadingCount + 1;

        return promise
          .catch(err => this.setError(err))
          .then(res => {
            this.setLoading(false);
            this.localLoadingCount = this.localLoadingCount - 1;
            return res;
          });
      },

      checkAuthentication() {
        return this.loadResource(this.updateCurrentUser());
      }
    }
  });
}