<template>
  <QuickNav selected="Contacts" />
  <TopMessage />

  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Heading -->
    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
      Meeting Members
    </h1>

    <!-- Back Button -->
    <button
      @click="$router.back()"
      class="mb-6 flex items-center text-blue-600 hover:text-blue-800"
    >
      <fa icon="arrow-left" class="mr-2" />
      Back to Meetings
    </button>

    <!-- Error State -->
    <div v-if="errorMessage">
      <div class="text-center text-red-600 py-8">
        {{ errorMessage }}
      </div>
      <div class="text-center">
        For authorization, wait for your meeting organizer to approve you.
      </div>
    </div>

    <!-- Members List -->
    <MembersList
      v-else
      :password="password"
      :decrypt-failure-message="'That password failed. You may be in the wrong meeting. Go back and try again.'"
      @error="handleError"
    />
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import { RouteLocation } from "vue-router";

import QuickNav from "@/components/QuickNav.vue";
import TopMessage from "@/components/TopMessage.vue";
import MembersList from "@/components/MembersList.vue";

@Component({
  components: {
    QuickNav,
    TopMessage,
    MembersList,
  },
})
export default class OnboardMeetingMembersView extends Vue {
  errorMessage = "";

  get groupId(): string {
    return (this.$route as RouteLocation).params.groupId as string;
  }

  get password(): string {
    return (this.$route as RouteLocation).query.password as string;
  }

  async created() {
    if (!this.groupId) {
      this.errorMessage = "The group info is missing. Go back and try again.";
      return;
    }
    if (!this.password) {
      this.errorMessage = "The password is missing. Go back and try again.";
      return;
    }
  }

  handleError(message: string) {
    this.errorMessage = message;
  }
}
</script>
