<template>
  <div class="absolute right-5 top-3">
    <span class="align-center text-red-500 mr-2">{{ message }}</span>
    <span class="ml-2">
      <router-link
        :to="{ name: 'help' }"
        class="text-xs uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md ml-1"
      >
        Help
      </router-link>
    </span>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-facing-decorator'

import { AppString, NotificationIface } from '../constants/app'
import { retrieveSettingsForActiveAccount } from '../db/index'

@Component
export default class TopMessage extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void

  @Prop selected = ''

  message = ''

  async mounted() {
    try {
      const settings = await retrieveSettingsForActiveAccount()
      if (
        settings.warnIfTestServer &&
        settings.apiServer !== AppString.PROD_ENDORSER_API_SERVER
      ) {
        const didPrefix = settings.activeDid?.slice(11, 15)
        this.message = "You're linked to a non-prod server, user " + didPrefix
      } else if (
        settings.warnIfProdServer &&
        settings.apiServer === AppString.PROD_ENDORSER_API_SERVER
      ) {
        const didPrefix = settings.activeDid?.slice(11, 15)
        this.message =
          "You're linked to the production server, user " + didPrefix
      }
    } catch (err: unknown) {
      this.$notify(
        {
          group: 'alert',
          type: 'danger',
          title: 'Error Detecting Server',
          text: JSON.stringify(err)
        },
        -1
      )
    }
  }
}
</script>
