<template>
  <div class="pt-3">
    <div v-if="data.matchDetails.map" class="head row m-auto mb-3 text-center">
      <div class="m-auto">
        <img :alt="data.matchDetails.map"
             :src="require('@/images/map_icons/map_icon_' + data.matchDetails.map + '.svg')"
             :title="data.matchDetails.map" class="map-icon">
      </div>
    </div>
    <p class="text-center fs-6">Average Rank: <img :src="require('@/images/rank_icons/skillgroup' + data.avgRank + '.svg')"
                                                   alt="Rank icon"
                                                   class="rank-icon mx-2"/></p>
  </div>
  <div class="nav">
    <ul class="list-unstyled d-flex m-auto">
      <li class="list-item active">Scoreboard</li>
      <li class="list-item">Rounds</li>
      <li class="list-item">Weapons</li>
      <li class="list-item">Duels</li>
      <li class="list-item">Heatmaps</li>
    </ul>
  </div>
  <div class="container row m-auto">
    <div v-if="data.score.length === 2 && data.stats" class="col-8 m-auto d-flex flex-column">
      <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :stats="data.stats" :team_id="1" :score="data.score[0]"/>
      <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :stats="data.stats" :team_id="2" :score="data.score[1]"/>
    </div>
  </div>
</template>

<script>
import {defineAsyncComponent, onBeforeMount, reactive, watch} from "vue";
import axios from 'axios'
import {GetHLTV_1, GoToPlayer} from "../utils";

const ScoreTeam = defineAsyncComponent(() => import('../components/ScoreTeam'))

export default {
  name: 'Match',
  props: ['match_id'],
  components: {ScoreTeam},
  setup(props) {
    // Refs
    const data = reactive({
      playerName: '',
      matchDetails: {},
      stats: [],
      score: [0],
      avgRank: 0,
    })

    // Functions
    const GetMatch = () => {
      axios
          .get(`${process.env.VUE_APP_API_URL}/match/${props.match_id}`)
          .then((response) => {
            document.title = `${response.data.map} | csgoWTF`
            data.matchDetails = response.data
            data.stats = response.data.stats
            data.score = response.data.score
            // console.log(response.data)
          })
          .catch((e) => {
            console.log(e)
          })
    }

    const GetAvgRank = () => {
      let count = 0
      let fullRank = 0

      data.stats?.map(player => {
        if (player.extended?.rank?.old) {
          fullRank += player.extended?.rank?.old
          count += 1
        }
      })

      if (count === 0)
        data.avgRank = 0
      else
        data.avgRank = Math.floor(fullRank / count)
    }

    // Watchers
    watch(() => props.match_id, GetMatch)
    watch(() => data.stats, GetAvgRank)

    // Run on create
    onBeforeMount(() => {
      GetMatch()
    })

    return {
      GetMatch, GetAvgRank, data, GoToPlayer, GetHLTV_1
    }
  }
}
</script>

<style lang="scss" scoped>
.head {
  img {
    width: auto;
    height: 100px;
  }
}
.rank-icon {
  width: 60px;
}
.nav {
  width: 100vw;
  background: rgba(0, 0, 0, 0.6);

  .list-item {
    padding: 10px 10px;

    &:hover {
      background: var(--bs-info);
      cursor: pointer;
    }

  }

  .active {
    background: var(--bs-info)
  }
}
</style>
