<template>
  <v-app id="inspire" dark>
    <v-app-bar flat app class="black">
      <v-tooltip bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-btn icon :href="landingPageUrl" v-bind="attrs" v-on="on"
            ><v-icon>mdi-home</v-icon></v-btn
          >
        </template>
        <span>Flood Event Explorer >> Landing Page</span>
      </v-tooltip>

      <v-toolbar-title>Flood Event Explorer </v-toolbar-title>
      <img class="delogo" src="~assets/images/de_logo_transparent.png" />
    </v-app-bar>
    <nuxt />
    <v-footer app fixed>
      <v-spacer></v-spacer>
      <span>&copy; 2021</span>
    </v-footer>
    <v-snackbar
      v-model="showMessage"
      :color="messageColor"
      top
      multi-line
      :timeout="15000"
    >
      {{ message }}
      <template v-slot:action="{ attrs }">
        <v-btn dark text v-bind="attrs" @click="showMessage = false"
          >Dismiss</v-btn
        >
      </template>
    </v-snackbar>
  </v-app>
</template>

<style scoped>
.delogo {
  height: 80%;
  position: fixed;
  right: 20px;
  top: 6px;
}
a {
  margin-right: 10px;
}
</style>

<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator';
import axios from 'axios';

@Component({})
export default class Default extends Vue {
  private showMessage = false;
  private message = '';
  private messageColor = 'error';
  private landingPageUrl =
    'http://rz-vm154.gfz-potsdam.de:8080/de-flood-event-explorer/';

  protected created(): void {
    this.loadConfig();
    this.initErrorHandling();
  }

  private loadConfig(): void {
    axios
      .get('config.json')
      .then((res) => {
        try {
          this.landingPageUrl = res.data['landing_page_url'];
        } catch (error) {
          console.warn(
            'unable to extract landing page url from config - using default fallback'
          );
        }
      })
      .catch(() => {
        console.warn('unable to load config file - using default fallback');
      });
  }

  private initErrorHandling(): void {
    console.log('registering global error handler');
    window.onerror = this.onError;
    window.addEventListener('unhandledrejection', (event) => {
      if (event.reason['config'] && event.reason['config']['url']) {
        this.toastError(
          event.reason.message + ' (' + event.reason.config.url + ')'
        );
      } else {
        this.toastError(event.reason.message);
      }
      return false;
    });
    Vue.config.errorHandler = this.errorCaptured;
  }

  private onError(
    event: string | Event,
    source?: string,
    lineno?: number,
    colno?: number,
    error?: Error
  ): boolean {
    // console.error('window.onError', event);
    this.toastError(event.toString());
    return false;
  }

  protected errorCaptured(err, vm, info): boolean {
    console.error('errorCaptured', err);
    this.toastError(err.toString());
    return false;
  }

  private toastError(message: string): void {
    this.message = message;
    this.messageColor = 'error';
    this.showMessage = true;
  }

  private toastWarning(message: string): void {
    this.message = message;
    this.messageColor = 'warning';
    this.showMessage = true;
  }
}
</script>
