import Vue from "vue";
import VueRouter from "vue-router";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";
import Vuelidate from "vuelidate";
import Layout from "./Layout.vue";
import ComponentLayout from "./ComponentLayout.vue";

// import NotFound from "./pages/NotFound.vue";
// import Card from "./components/Card.vue";
// import AForm from "./components/AForm";
// import Counter from "./components/Counter";
// import App from "./App.vue";

const App = () => import(/* webpackChunkName: "home" */ "./App.vue");
const NotFound = () =>
  import(/* webpackChunkName: "notfound" */ "./pages/NotFound.vue");
const Card = () =>
  import(/* webpackChunkName: "card" */ "./components/Card.vue");
const AForm = () =>
  import(/* webpackChunkName: "aform" */ "./components/AForm.vue");
const Counter = () =>
  import(/* webpackChunkName: "counter" */ "./components/Counter.vue");
const Link = () =>
  import(/* webpackChunkName: "link" */ "./components/Link.vue");

Vue.use(VueRouter);
Vue.use(Vuelidate);
Vue.use(Vuex);

Vue.config.productionTip = false;

// function requireAuth(to, from, next) {
//   // On vérifie si l'utilisateur est authentifié
//   const isAuthenticated = false;

//   if (!isAuthenticated) {
//     next({ name: "login" });
//   } else {
//     next();
//   }
// }

const router = new VueRouter({
  // linkActiveClass: '',
  mode: "history",
  routes: [
    { path: "/vuex", component: () => import("./pages/VuexTest.vue") },
    {
      path: "/components",
      component: ComponentLayout,
      beforeEnter(to, from, next) {
        // next(vm => {
        //   vm.$data.count = 2;

        // });

        // console.log("going into /components");

        next();
      },
      children: [
        {
          path: "aform",
          component: AForm,
          // beforeEnter: requireAuth,
          // beforeEnter() {},
          name: "form",
          meta: { title: "Un formulaire" },
        },
        {
          path: "some-counter",
          component: Counter,
          name: "counter",
          meta: { title: "Un compteur" },
        },
      ],
    },
    {
      path: "/link/:id",
      component: Link,
      name: "link",
      meta: {},
    },
    {
      path: "/card/:a/:b",
      component: Card,
      name: "card",
      // props: true,
      props: (route) => ({
        alternate: !!route.query.alternate,
        firstname: route.params.a,
        lastname: route.params.b,
      }),
      meta: { title: "Carte" },
    },
    // { path: "/", redirect: "/counter", name: "home" },
    { path: "/", component: App, name: "home", meta: { title: "Acceuil" } },
    { path: "*", component: NotFound, meta: { title: "Non trouvée" } },
  ],
});

router.beforeEach((to, from, next) => {
  // document.title = to.meta.title;
  next();
});

router.afterEach((to) => {
  console.log(to.matched);
  document.title = to.meta.title;
});

const store = new Vuex.Store({
  modules: {
    counter: {
      namespaced: true,
      state: {
        count: 0,
      },
      mutations: {
        increment(state) {
          state.count++;
        },
        decrement(state) {
          state.count--;
        },
        setValue(state, value) {
          state.count = value;
        },
      },
      actions: {
        delayDecrement(context) {
          context.commit("increment");

          setTimeout(() => context.commit("decrement"), 5000);
        },
      },
      getters: {
        doubleCount(state) {
          return state.count * 2;
        },
      },
    },
  },
  plugins: [
    createPersistedState({
      // paths: ['counter']
    }),
  ],
});

Vue.use({
  install(v) {
    v.prototype.$increment = function() {
      this.$store.commit("counter/increment");
    };

    v.prototype.$decrement = function() {
      this.$store.commit("counter/decrement");
    };

    v.component("greet", {
      render: (h) => h("p", "Hello there"),
    });
    v.filter("uppercase", (v) => v.toString().toUpperCase());
  },
});

Vue.config.errorHandler = (err, vm) =>
  console.log("erreur", err, "dans le composant", vm);

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