import type {Directive, DirectiveBinding} from "vue";
import usePermissions from "@/composables/usePermissions";

type DisableableElement = HTMLInputElement | HTMLButtonElement | HTMLSelectElement | HTMLTextAreaElement;

export const disabledByPermissionDirective: Directive<DisableableElement, string> = {
    mounted(el: DisableableElement, binding: DirectiveBinding<string>) {
        const { can } = usePermissions();
        if (!can(binding.value)) {
            el.disabled = true;
            el.style.cursor = "not-allowed";
        }
    }
}