// src/main.js  OR  src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './store';
import store from './store';
import acl from './acl'; // import the instance of the defined ACL

const app = createApp(App);
app.use(router);
app.use(store);
app.use(acl); // install vue-simple-acl
app.mount("#app");

// src/main.js  OR  src/main.ts

import Vue from 'vue'
import App from './App.vue'
import router from './router';
import store from './store';
import acl from './acl'; // import the instance of the defined ACL

Vue.config.productionTip = false;

Vue.use(acl); // install vue-simple-acl

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

// src/acl/index.js  OR  src/acl/index.ts

// Import router if you are using the middleware on Vue Router
import router from "../router"; 
// Import store if you are using reactive Store/Vuex as User data source
import store from "../store";

// ----- VUE 3 Imports -----
import { computed } from 'vue'; // For VUE 3
import { createAcl, defineAclRules } from 'vue-simple-acl';

// in Vue 3, if you received the error "ReferenceError: Vue is not defined", import from the src path
import { createAcl, defineAclRules } from 'vue-simple-acl/src';

// ----- VUE 2 Imports -----
import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api'; // Ensure this is installed
Vue.use(VueCompositionAPI); // VueCompositionAPI must be used as plugin before any function, otherwise see your console if warning/errpr
import { computed } from '@vue/composition-api'; // import computed function
import { createAcl, defineAclRules } from 'vue-simple-acl/dist/vue-simple-acl.vue2';

// ---------------
// The Vue Simple ACL option 'user' can be a user OBJECT, FUNCTION returning a user object
// or an Asynchronous function returning a PROMISE of user object, suitable for performing fetch from API.

// USER EXAMPLE 1: User {OBJECT}
const user = {
  id: 1,
  name: 'Victory Osayi',
  is_editor: true,
  is_admin: false,
  // you can have role based permission list or access control list possibly from database
  permissions: ['admin', 'owner', 'moderator', 'create-post', 'edit-post', 'delete-post']
}

// USER EXAMPLE 2: User object from a {FUNCTION} or computed property like from Vuex Store
// Suitable if you already has an existing logics authenticating and saving user data to Vuex Store
const user2 = computed(() => store.state.auth.user);

// USER EXAMPLE 3; User object from an Asynchronous {FUNCTION} / {PROMISE}:
// Using Async/Promise requires instance of vue-router, the function will be auto hooked to beforeEach() peroperty of vue-router
const user3 = () => {
  const authUserId = 1; // ID of authenticated user
  return axios.get(`api/users/${authUserId}`)
    .then((response) => response.data);
}

const rules = () => defineAclRules((setRule) => {
  // setRule('unique-ability', callbackFunction(user, arg1, arg2, ...) { });
  // setRule(['unique-ability-1', 'unique-ability-2'], callbackFunction(user, arg1, arg2, ...) { });
  
  // Define a simple rule for ability with no argument
  setRule('create-post', (user) => user.is_admin || user.is_editor);
  setRule('is-admin', (user) => user.is_admin);
  setRule('is-editor', (user) => user.is_editor);
  // Define a simple rule for ability with an argument
  setRule('edit-post', (user, post) => user.id === post.user_id);
  setRule('delete-post', (user, post) => {
    return user.id === post.user_id || user.is_admin;
  });
  // Define rule for array of multiple abilities that share same arguments and callback function
  setRule(['publish-post', 'unpublish-post'], (user, post) => user.id === post.user_id);  
  // Define rule for ability with multiple arguments
  setRule('hide-comment', (user, post, comment) => {
    return user.is_admin || user.id === post.user_id || (user.id === comment.user_id && post.id === comment.post_id);
  });
  setRule('moderator', (user) => user.permissions && user.permissions.includes('moderator'));
});

const simpleAcl = createAcl({
  user, // short for user: user
  rules, // short for rules: rules
  router, // OPTIONAL, short for router: router 
  // other optional vue-simple-acl options here... See Vue Simple ACL Options below
});

export default simpleAcl;

if (this.$can('edit-post', post)) {
  axios.put(`/api/posts/${post.id}`, postData)
}

import { useAcl } from 'vue-simple-acl';

export default {
  setup() {
    const acl = useAcl();

    if (acl.can('edit-post', post)) {
      axios.put(`/api/posts/${post.id}`, postData)
    }

    if (acl.can('hide-comment', [post, comment])) {
      // Execute this block if user can hide comment of a post
    }

    if (acl.can.not('edit-post', post)) {
      // Execute this block if user can not edit post
    }

    if (acl.can.any(['is-admin', 'is-editor'])) {
      // Execute this block if user is admin OR is editor
    }

    if (acl.can.any([ 'is-admin', ['delete-post', post] ])) {
      // Execute this block if user is admin OR can delete post
    }

    // Get data of the defined ACL User being validated
    const user = acl.user;
    const user = acl.getUser();
  }
}

const simpleAcl = createAcl({
  user, // short for user: user
  rules, // short for rules: rules
  router, // short for router: router
  onDeniedRoute: '/unauthorized' // OR { path: '/unauthorized' } OR { name: 'unauthorized', replace: true} or '$from'
});
app.use(simpleAcl);

{
  path: 'posts/create',
  name: 'createPost',
  component: CreatePost,
  meta: {
    can: 'create-post',
    onDeniedRoute: '/unauthorized' // value of onDeniedRoute option will be used if not set
  }
}

{
  path: 'posts/create',
  name: 'createPost',
  component: CreatePost,
  meta: {
    can: ['is-admin', 'create-post'],
    onDeniedRoute: { name: 'unauthorizedPage', replace: true }
  }
}

{
  path: 'posts/create',
  name: 'createPost',
  component: CreatePost,
  meta: {
    notCan: 'moderator',
    onDeniedRoute: { name: 'unauthorizedPage', replace: true }
  }
}

{
  path: 'posts/create',
  name: 'createPost',
  component: CreatePost,
  meta: {
    anyCan: ['is-admin', 'create-post'],
    onDeniedRoute: { name: 'unauthorizedPage', replace: true }
  }
}

{
  path: 'posts/:postId',
  component: PostEditor,
  meta: {
    can: (to, from, can) => {        
      return axios.get(`/api/posts/${to.params.id}`)
        .then((response) => can('edit-post', response.data));
    },
    onDeniedRoute: '/unauthorized'
  }
}

{
  path: 'posts/:postId/publish',
  component: ManagePost,
  meta: {
    anyCan: (to, from, anyCan) => {        
      return axios.get(`/api/posts/${to.params.id}/publish`)
        .then((response) => anyCan(['is-admin', ['edit-post', response.data]]));
    },
    onDeniedRoute: '/unauthorized'
  }
}

{
  path: 'posts/:postId/publish',
  component: ManagePost,
  meta: {
    anyCan: (to, from, anyCan, user) => {        
      return axios.get(`/api/users/${user.id}/posts/${to.params.id}/publish`)
        .then((response) => anyCan(['is-admin', ['edit-post', response.data]]));
    },
    onDeniedRoute: '/unauthorized'
  }
}

onDeniedRoute: { path: '/login': replace: true }

onDeniedRoute: '$from'