<template>
  <div class="cms-app">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <dropdown-menu v-if="navigation.brand.items.length" :label="navigation.brand.label" class="navbar-brand">
        <a v-for="(brandItem, index) in navigation.brand.items" :key="index" class="dropdown-item" :href="brandItem.href">{{brandItem.label}}</a>
      </dropdown-menu>
      <a v-else-if="navigation.brand && navigation.brand.label" href="/" class="navbar-brand">{{navigation.brand.label}}</a>

      <ul class="navbar-nav mr-auto">
        <li class="nav-item" :class="{'dropdown': !item.href }" v-for="(item, index) in navigation.items" :key="index">
          <menu-item v-if="item.href" :href="item.href" class="nav-link" :label="item.label" :item-name="getItemName(item)"/>
          <dropdown-menu v-else :label="item.label" :disabled="!canReadSome(item.items)">
            <menu-item v-for="subItem in item.items" :key="subItem.href" class="dropdown-item nav-link" :href="subItem.href" :label="subItem.label" :item-name="getItemName(subItem)"/>
          </dropdown-menu>
        </li>
      </ul>
    </nav>

    <div class="container-fluid">
      <alerter ref="alerter"></alerter>
      <router-view></router-view>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .navbar {
    .navbar-nav {
      flex-direction: row;
      flex-wrap: wrap;

      .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
      }
    }

    .navbar-brand {
      background-size: 120px;
      background-repeat: no-repeat;
      background-position: left center;
      margin-right: 0;
      padding: 0 1px 0 130px;
      font-size: 18px;
      position: relative;

      &:before,
      &:after {
        content: "";
        position: absolute;
        top: 5px;
        bottom: 5px;
      }
      &:before {
        border-left: 1px solid #989898;
        left: 130px;
      }
      &:after {
        border-right: 1px solid #989898;
        right: 0;
      }
    }
  }

  .nav-link.active {
    font-weight: bold;
  }
</style>

<script>
  import { permissionStore } from './tools/permission-store.js'
  import alerter from './shared/alerter.vue';

  export default {
    mounted() {
      this.addProductionLabel();
      this.addNavigationBrandItemsFromDataset();
    },
    methods: {
      addProductionLabel() {
        const cmsIsProduction = document.documentElement.dataset.isCmsProduction || '';

        // cmsDomainProduction can be of type String or Array
        if (cmsIsProduction === 'true' || cmsIsProduction === 'True') {
          document.body.classList.add('environment-production');
        }
      },
      addNavigationBrandItemsFromDataset() {
        const items = document.documentElement.dataset.navigationBrandItems || null;

        if (!items) {
          return;
        }

        try {
          this.navigation.brand.items = this.navigation.brand.items.concat(JSON.parse(items));
        } catch(e) {
          console.error(e);
        }
      },
      getItemName(item) {
        if (item.href == '/pages') {
          return 'CmsPage';
        }
        if (item.href == '/assets') {
          return 'CmsAsset';
        }
        return item.factory && item.factory.name;
      },
      canReadSome(items) {
        return items.some(item => permissionStore.canRead(this.getItemName(item)));
      }
    },
    components: {
      alerter
    }
  }
</script>
