<template>
  <main>
    <section class="hero is-info is-large">
      <div class="hero-body">
        <div class="container" v-if="!expired && !loading">
          <h2>
            You have been invited to:
          </h2>
          <h1>
            {{ team.name }}
          </h1>
        </div>
        <div class="container" v-if="expired && !loading">
          <h1>This invite has expired</h1>
        </div>
        <div class="container" v-if="loading">
          <h1>Loading...</h1>
        </div>
      </div>
    </section>
  </main>
</template>
<script>
import AjaxErrorHandler from "@/assets/js/errorHandler";

export default {
  name: 'TeamInvite',
  // eslint-disable-next-line vue/no-unused-components
  data () {
    return {
      team: {
        name: '',
        picture: ''
      },
      expired: false,
      loading: true,
      code: this.$route.params.code
    }
  },
  watch: {
    $route (to) {
      this.selected = this.getIndexFromRoute(to.path)
    }
  },
  computed: {
    userColor () {
      if(this.user) {
        return this.user.color
      } else {
        return null
      }
    },
    userPicture () {
      if(this.user && this.user.picture) {
        return 'https://cdn.kaverti.com/user/avatars/full/' + this.user.picture + '.png'
      } else {
        return null
      }
    }
  },
  methods: {
    resetFetchData () {
      this.offset = 0;
      this.users = [];

      this.fetchData();
    },
    fetchData () {
      this.axios
        .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `teams/invite/${this.$route.params.code}`)
        .then(res => this.user = res.data, this.loading = false)
        .catch(() => {
          this.team.name = "Invite has expired or is invalid."
          this.loading = false
          this.expired = true
          })
    },
    leaveTeam () {
      this.axios
        .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'teams/leave/' + this.user.username)
        .then(() => {
          this.axios
            .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'teams/check/' + this.$route.params.username)
            .then(res => {
              this.joined = res.data.success
            })
        })
        .catch(e => {
          AjaxErrorHandler(this.$store)(e)
          this.axios
            .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'teams/check/' + this.$route.params.username)
            .then(res => {
              this.joined = res.data.success
            })
        })
    },
    joinTeam () {
      this.axios
        .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'teams/join/' + this.user.username)
        .then(() => {
          this.axios
            .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'teams/check/' + this.$route.params.username)
            .then(res => {
              this.joined = res.data.success
            })
        })
        .catch(e => {
          AjaxErrorHandler(this.$store)(e)
          this.axios
            .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'teams/check/' + this.$route.params.username)
            .then(res => {
              this.joined = res.data.success
            })
        })
    },
    getIndexFromRoute (path) {
      let selectedIndex
      let route = path.split('/')[3]

      this.menuItems.forEach((item, index) => {
        if(item.route === route) {
          selectedIndex = index
        }
      })

      return selectedIndex
    }
  },
  created () {
    this.resetFetchData()
    this.selected = this.getIndexFromRoute(this.$route.path)

    this.axios
      .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `teams/view/${this.$route.params.username}`)
      .then(res => this.user = res.data)
    this.axios
      .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'teams/check/' + this.$route.params.username)
      .then(res => {
        this.joined = res.data.success
      })
  }
}
</script>
