import * as Vue from "vue";
import {DirectiveBinding} from "vue";
import App from "./App.vue";
import router from "./router";
import {defineCustomElements, setAssetPath, SlInput,} from "@shoelace-style/shoelace";

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

const app = Vue.createApp(App);
app.use(router);
app.mount("#app");

app.config.isCustomElement = (tag: string) => Boolean(tag.match(/^sl-/));


app.directive("sl-model", {
    beforeMount: (element: Element, binding: DirectiveBinding<string>) => {
        element.addEventListener("slInput", (event) => {
            const slElement = event?.target as
              | typeof SlInput.prototype
              | undefined;
            const value = slElement?.value;
            if (value && binding.instance) {
                (binding.instance.$data as { [key: string]: unknown })[binding.arg as string] = value;
            }
        });
    },
    updated: (element: Element, binding: DirectiveBinding<string>) => {
        const slElement = element as typeof SlInput.prototype | undefined;
        if (slElement) {
            slElement.value = (binding.instance?.$data as { [key: string]: unknown })[binding.arg as string] as string;
        }
    },
});