<template>
  <div class="navsearch_container container-fluid">
    <NuxtLink to="/editar/perfil">Mi perfil</NuxtLink>
    <NuxtLink :class="{ disabled: !coopIsValidated }" to="/editar/cooperativa"
      >Cooperativa</NuxtLink
    >
    <!-- <NuxtLink to="/editar/cooperativa/crear">Crear cooperativa</NuxtLink> -->
    <NuxtLink :class="{ disabled: !coopIsValidated }" to="/editar/productos"
      >Productos</NuxtLink
    >
    <NuxtLink
      :class="{ disabled: !coopIsValidated }"
      to="/editar/productos/importar"
      >Importar</NuxtLink
    >
    <NuxtLink to="/" @click="logout" >Cerrar sesión</NuxtLink>
  </div>
</template>

<script>
import { useAuthStore } from '@/stores/auth'
export default {
  setup() {
    const auth = useAuthStore();
    return {
      auth,
    }
  },
  data() {
    return {
      coopIsValidated: false,
    }
  },
  async mounted() {
    await this.checkIfCoopValidated()
  },
  methods: {
    async logout() {
      await this.auth.logout()
    },
    async checkIfCoopValidated() {
      const config = useRuntimeConfig()
      const accessToken = this.auth.access
      const result = await $fetch('my_company/', {
        baseURL: config.public.baseURL,
        method: 'GET',
        headers: {
          Authorization: `Bearer ${accessToken}`
        }
      })
      this.coopIsValidated = result.company.is_validated
    },
  },
}
</script>

<style lang="scss" scoped>
.navsearch_container {
  border-bottom: 3px solid $color-grey-nav;
  text-align: center;
  padding: 20px 20px;

  a {
    font-size: $m;
    font-weight: $bold;
    color: $color-navy;
    text-decoration: none;
  }
  a:nth-child(1):after,
  a:nth-child(2):after,
  a:nth-child(3):after,
  a:nth-child(4):after {
    color: $color-navy;
    content: '\22EE';
    margin: 0.5rem;
  }
  @include mobile {
    display: none;
  }
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>
