<template>
  <main>
    <modal-window v-if="team.Role" v-model='showRoleInfo' :loading='loading' style='z-index: 99; '>
      <div slot="header">
        Viewing {{team.Role.name}}&nbsp;<b-tooltip class="is-info" label="You are viewing the permissions that this Auto Role provides">
        <b-tag class="is-info" rounded><i class="fas fa-info-circle"></i></b-tag>
      </b-tooltip>
      </div>
      <div slot='main' class="card-content">
        <div>
          <p>Permissions:</p>
          <b-switch type="is-info" disabled v-model="team.Role.administrator">
            Administrator
          </b-switch>
          <b-switch type="is-info" disabled v-model="team.Role.inviteUsers">
            Invite users
          </b-switch>
          <b-switch type="is-info" disabled v-model="team.Role.changeTeamMeta">
            Modify general Team settings
          </b-switch>
          <b-switch type="is-info" disabled v-model="team.Role.forumAdministrator">
            Modify Team Forum <b-tooltip class="is-info" label="Team forums are coming soon, you can set this for the future when they do release."><b-tag class="is-info" rounded><i class="fas fa-info-circle"></i></b-tag></b-tooltip>
          </b-switch>
          <b-switch type="is-info" disabled v-model="team.Role.moderateForumThreads">
            Forum moderator <b-tooltip class="is-info" label="Team forums are coming soon, you can set this for the future when they do release. This role only allows people with the permission to delete threads and posts, not have access to forum settings"><b-tag class="is-info" rounded><i class="fas fa-info-circle"></i></b-tag></b-tooltip>
          </b-switch>
          <b-switch type="is-info" disabled v-model="team.Role.submitTeamItems">
            Submit Marketplace items <b-tooltip class="is-info" label="Team Marketplace items are coming soon, you can set this for the future when they do release."><b-tag class="is-info" rounded><i class="fas fa-info-circle"></i></b-tag></b-tooltip>
          </b-switch>
        </div>
      </div>
      <div slot='footer'>
        <button class='button is-info' :loading="team.Role.loading" @click='showRoleInfo = false'>Got it!</button>
      </div>
    </modal-window>
    <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.Team.name }}
          </h1>
          <h2>by {{team.User.username}}</h2>
          <h2 v-if="team.Role">and you will be assigned the {{team.Role.name}} role automatically. <b-button @click="showRoleInfo = true">View role info</b-button></h2>
          <b-button @click="joinTeam">Join {{team.Team.name}}</b-button>
        </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 ModalWindow from '../ModalWindow'
import AjaxErrorHandler from "@/assets/js/errorHandler";

export default {
  name: 'TeamInvite',
  components: {
    ModalWindow
  },
  // eslint-disable-next-line vue/no-unused-components
  data () {
    return {
      team: {
        name: '',
        picture: '',
        Team: {
          name: '',
          username: ''
        }
      },
      showRoleInfo: false,
      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 'http://localhost/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.team = 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
        .post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'teams/invite/' + this.$route.params.code)
        .then(() => {
          this.$router.push('/t/' + this.team.Team.username)
        })
        .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>
