<template>
  <div>
    <!-- Router view for logged out users -->
    <router-view v-if="isDashRoutes == true" :props="props"></router-view>

    <!-- For logged in users -->
    <!-- Checking if user has onboarded -->
    <template v-if="isDashRoutes == false">
      <div v-if="isAuthLoading==true">
        <div id="loading" class="dashboard-loading">
          <div class="load-wrapp">
            <div class="load-3">
              <div class="line line-blue"></div>
              <div class="line line-blue"></div>
              <div class="line line-blue"></div>
            </div>
          </div>
        </div>
      </div>
      <Dashboard v-else :props="props"></Dashboard>
    </template>
  </div>
</template>

<script>
import Dashboard from "./Dashboard/Index";
import auth from "../mixins/auth";

export default {
  mixins: [auth],
  data() {
    return {
      isDashRoutes: false,
      // loggedIn: false,
      url: "",
      user_id: null,
      name: null,
      paid: null,
      mine_entities: 1,
      hasOnBoarded: null,
      free_use_policy: null,
      hasLoaded: false,
      isAuthLoading: true,
      salience: 1,
    };
  },
  computed: {
    props() {
      if (this.$route.name === "dashboard.settings") {
        return {
          hasLoaded: this.hasLoaded,
          mine_entities: this.mine_entities,
          salience: this.salience,
          free_use_policy: this.free_use_policy,
        };
      }

      if (this.$route.name === "dashboard.settings") {
        return { 
          name: this.name
        };
      }
    },
  },
  async beforeMount() {
    await this.fetchUser();
  },
  mounted() {
    // This is when a user refreshes
    window.bearer_token = this.auth;
    if (
      this.$route.fullPath.includes("login") ||
      this.$route.fullPath.includes("register") ||
      this.$route.fullPath.includes("onboarding") ||
      this.$route.fullPath.includes("forgot-password") ||
      this.$route.fullPath.includes("reset-password")
    ) {
      // set dashroutes to true to ensure we don't see the dashboard
      this.isDashRoutes = true;

      // want to now check if the person is logged in and redirect them to settings page.
      if (this.loggedIn == true) {
        this.$router.push({ name: "dashboard.dashboard" }).catch(() => {});
      }
    }
  },
  methods: {
    updateState(data) {
      this.hasOnBoarded = data;
    },
  },
  watch: {
    // When a user changes route.
    $route(to, from) {
      if (
        to.name.includes("login") ||
        to.name.includes("register") ||
        this.$route.fullPath.includes("onboarding") ||
        this.$route.fullPath.includes("forgot-password") ||
        this.$route.fullPath.includes("reset-password")
      ) {
        this.isDashRoutes = true;
      } else {
        this.fetchUser();
      }
    },
  },
  components: {
    Dashboard,
  },
  props: ['auth'],
};
</script>