<template>
  <main class="container is-fluid">
    <div v-if="loading" class="notification is-info">Loading...</div>
    <div v-else-if="!repo" class="notification is-danger">Not found.</div>
    <template v-else>
      <div class="level">
        <div class="level-left is-block">
          <div class="subtitle is-5">Repository</div>
          <h1 class="title">{{ repo.url }}</h1>
        </div>
        <div
          class="level-right button is-danger"
          v-on:click="deleteModal = true"
        >
          <i class="icon-trash"></i>
          Delete
        </div>
      </div>

      <hr />
      <h2 class="title is-4">Members</h2>
      <ListMembers content-type="repository" :content-id="repoId" />
      <DeleteModal
        v-model:modal="deleteModal"
        :repo="repo"
        v-on:delete="postDelete"
      />
    </template>
  </main>
</template>

<script lang="ts">
import { PropType, defineComponent } from 'vue'
import { UUID } from '@/types'
import { useNotificationStore, useRepositoryStore } from '@/stores'
import { mapState, mapActions } from 'pinia'
import { errorParser } from '@/helpers'
import ListMembers from '@/components/Memberships/ListMembers.vue'
import DeleteModal from '@/components/Repos/DeleteModal.vue'
import { Repository } from '@/types/worker'

export default defineComponent({
  components: {
    ListMembers,
    DeleteModal
  },
  props: {
    repoId: {
      type: String as PropType<UUID>,
      required: true
    }
  },
  data: () => ({
    loading: false,
    deleteModal: false
  }),
  created () {
    if (!this.repo) this.load()
  },
  computed: {
    ...mapState(useRepositoryStore, ['repositories']),
    repo (): Repository {
      return this.repositories[this.repoId]
    }
  },
  methods: {
    ...mapActions(useRepositoryStore, ['retrieveRepository']),
    ...mapActions(useNotificationStore, ['notify']),
    async load () {
      try {
        this.loading = true
        await this.retrieveRepository(this.repoId)
      } catch (err) {
        this.notify({ type: 'error', text: `An error occurred retrieving the repository: ${errorParser(err)}` })
      } finally {
        this.loading = false
      }
    },
    postDelete () {
      // Replace the route as the repository does not exists anymore
      this.$router.replace({ name: 'repos-list' })
    }
  }
})
</script>