<template>
  <div class="cms-app">
    <div
      class="environment-bar"
      v-if="activeEnvironment"
      :style="{ 'background-color': activeEnvironment.color, color: activeEnvironment.textColor }"
    >
      <div class="container-fluid" v-text="activeEnvironment.label"></div>
    </div>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <dropdown-menu
        v-if="navigation.brand && navigation.brand.items && 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"
              :href="subItem.href"
              :label="subItem.label"
              :item-name="getItemName(subItem)"
            />
          </dropdown-menu>
        </li>
      </ul>

      <button @click="showLogoutDialog" class="btn btn-outline-dark" v-if="showLogout"><span class="icon-switch"></span> Uitloggen</button>
    </nav>

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

    <confirm-dialog max-width="500px" ref="confirmDialog"></confirm-dialog>
  </div>
</template>

<style lang="scss" scoped>
.environment-bar {
  line-height: 30px;
}

.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 lang="ts">
import { Component, Ref, Vue } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import alerter from './shared/alerter.vue';
import { getCmsSettings } from './tools/settings';
import { NavigationItem, NavigationSettings, Environment } from './types/settings';
import ConfirmDialog from './shared/form/confirm-dialog.vue';

const PermissionStore = namespace('permissions');

@Component({
  components: {
    alerter,
    ConfirmDialog
  }
})
export default class RootComponent extends Vue {
  @PermissionStore.Getter('canRead') readonly canRead!: Function;
  navigation: NavigationSettings = getCmsSettings().navigation;

  @Ref('confirmDialog') readonly confirmDialog!: ConfirmDialog;

  get showLogout() {
    return getCmsSettings().showLogoutInNavigation;
  }

  get activeEnvironment(): Environment | undefined {
    const cmsSettings = getCmsSettings();

    if (!cmsSettings.environments) {
      return;
    }

    return cmsSettings.environments.find((e) => e.isActive);
  }

  mounted() {
    this.addEnvironmentDocumentTitle();
  }

  addEnvironmentDocumentTitle(): void {
    if (this.activeEnvironment) {
      document.title = `(${this.activeEnvironment.label}) - ${document.title}`;
    }
  }

  async showLogoutDialog() {
    const text =
      getCmsSettings().authenticationType == 'google'
        ? '<strong>Weet u zeker dat u wilt uitloggen?</strong><br/>Als u uitlogt bij het CMS wordt u bij alle Google diensten en applicaties uitgelogd in verband met de veiligheid.'
        : 'Weet u zeker dat u wilt uitloggen?';

    try {
      await this.confirmDialog.confirm(`Uitloggen`, text, 'Uitloggen');
    } catch (_) {
      // This empty catch is for handling the promise rejection on user cancellation
      return;
    }

    document.location.href = '/logout';
  }

  getItemName(item: NavigationItem): string | undefined {
    if (item.href == '/pages') {
      return 'CmsPage';
    }
    if (item.href == '/assets') {
      return 'CmsAsset';
    }
    if (item.href == '/cms-docs') {
      return 'CmsPage'; // Cms docs should always be available for anyone with CmsPage rights
    }
    return item.factory && item.factory.name;
  }

  canReadSome(items: NavigationItem[]): boolean {
    return items.some((item) => this.canRead(this.getItemName(item)));
  }
}
</script>
