import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import {
  defineCustomElements,
  setAssetPath,
  SlInput
} from "@shoelace-style/shoelace";
import { VNode } from "vue/types/umd";
import { DirectiveBinding } from "vue/types/options";

// TODO: Remove when UI settles!
defineCustomElements();
setAssetPath(`${window.location.origin}/${process.env.VUE_APP_ASSET_PATH}/`);

Vue.directive("sl-model", {
  inserted: (element: Element, binding: DirectiveBinding, vnode: VNode) => {
    element.addEventListener("slInput", event => {
      const slElement = event?.srcElement as
        | typeof SlInput.prototype
        | undefined;
      const value = slElement?.value;
      if (value) {
        vnode.context?.$set(vnode.context, binding.expression, value);
      }
    });
  },
  update: (element: Element, binding: DirectiveBinding, vnode: VNode) => {
    const slElement = element as typeof SlInput.prototype | undefined;
    if (slElement) {
      slElement.value = vnode.context?.$data[binding.expression];
    }
  }
});

Vue.config.ignoredElements = [/^sl-/];
Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");