<template>
  <img v-if="data.matchDetails.map" :alt="data.matchDetails.map" :src="require('../images/map_screenshots/' + data.matchDetails.map + '.png')"
       class="bg-img">
  <div class="">
    <div v-if="data.matchDetails.map" class="head row m-auto text-center">
      <div class="m-auto map">
        <img :alt="data.matchDetails.map"
             :src="require('@/images/map_icons/map_icon_' + data.matchDetails.map + '.svg')"
             :title="data.matchDetails.map" class="map-icon">
      </div>
      <p class="text-center fs-6">Average Rank: <img
          :src="DisplayRank(data.avgRank)[0]"
          :alt="DisplayRank(data.avgRank)[1]"
          :title="DisplayRank(data.avgRank)[1]"
          class="rank-icon"/></p>
    </div>
  </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="scoreboard">
    <div v-if="data.score.length === 2 && data.stats">
      <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :score="data.score[0]" :stats="data.stats"
                 :team_id="1" :rounds="data.matchDetails.rounds"/>
      <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :score="data.score[1]" :stats="data.stats"
                 :team_id="2" :rounds="data.matchDetails.rounds"/>
    </div>
  </div>
</template>

<script>
import {defineAsyncComponent, onBeforeMount, reactive, watch} from "vue";
import axios from 'axios'
import {GetHLTV_1, GoToPlayer, DisplayRank} 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, DisplayRank
    }
  }
}
</script>

<style lang="scss" scoped>
.bg-img {
  z-index: -1;
  //top: 0;
  //left: 0;
  position: fixed;
  //max-width: 100%;
  //height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.head {
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(15, 15, 15, 0.8) 30%,
      rgba(15, 15, 15, 0.8) 70%,
      rgba(0, 0, 0, 0) 100%
  );

  .map img {
    width: auto;
    height: 100px;
    margin: 10px 0;
  }

  .rank-icon {
    width: 60px;
  }
}

.scoreboard {
  z-index: 1;
  max-width: 100vw;
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(15, 15, 15, 0.8) 30%,
      rgba(15, 15, 15, 0.8) 70%,
      rgba(0, 0, 0, 0) 100%
  );

  div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.nav {
  max-width: 100vw;
  background: rgba(0, 0, 0, 0.9);

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

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

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