<template>
  <div class="scoreboard">
    <table>
      <caption>
        <div v-if="store.state.matchDetails.max_rounds === 16" id="short-match">
          <div class="team-1">
            <div class="score-text">
              <span v-if="store.state.matchDetails.score[0] < 10"
                    :style="store.state.matchDetails.score[0] < 10 ? 'margin-left: -10px;' : ''"
                    class="hidden">0</span><span
                :class="store.state.matchDetails.score[0] === 9 ? 'text-success' : store.state.matchDetails.score[0] === 8 ? 'text-warning' : 'text-danger'">{{
                store.state.matchDetails.score[0]
              }}</span>
            </div>
            <img alt="CT logo" src="/images/icons/ct_logo.svg">
            <img alt="T logo" src="/images/icons/t_logo.svg">
          </div>
          <div class="team-2">
            <div class="score-text">
              <span v-if="store.state.matchDetails.score[1] < 10"
                    :style="store.state.matchDetails.score[1] < 10 ? 'margin-left: -10px;' : ''"
                    class="hidden">0</span><span
                :class="store.state.matchDetails.score[1] === 9 ? 'text-success' : store.state.matchDetails.score[1] === 8 ? 'text-warning' : 'text-danger'">{{
                store.state.matchDetails.score[1]
              }}</span>
            </div>
            <img alt="T logo" src="/images/icons/t_logo.svg">
            <img alt="CT logo" src="/images/icons/ct_logo.svg">
          </div>
        </div>

        <div v-if="store.state.matchDetails.max_rounds === 30 || !store.state.matchDetails.max_rounds" id="long-match">
          <div class="team-1">
            <div class="score-text">
              <span v-if="store.state.matchDetails.score[0] < 10"
                    :style="store.state.matchDetails.score[0] < 10 ? 'margin-left: -10px;' : ''"
                    class="hidden">0</span><span
                :class="store.state.matchDetails.match_result === 1 ? 'text-success' : store.state.matchDetails.match_result === 0 ? 'text-warning' : 'text-danger'">{{
                store.state.matchDetails.score[0]
              }}</span>
            </div>
            <img alt="CT logo" src="/images/icons/ct_logo.svg">
            <img alt="T logo" src="/images/icons/t_logo.svg">
          </div>
          <div class="team-2">
            <div class="score-text">
              <span v-if="store.state.matchDetails.score[1] < 10"
                    :style="store.state.matchDetails.score[1] < 10 ? 'margin-left: -10px;' : ''"
                    class="hidden">0</span><span
                :class="store.state.matchDetails.match_result === 2 ? 'text-success' : store.state.matchDetails.match_result === 0 ? 'text-warning' : 'text-danger'">{{
                store.state.matchDetails.score[1]
              }}</span>
            </div>
            <img alt="T logo" src="/images/icons/t_logo.svg">
            <img alt="CT logo" src="/images/icons/ct_logo.svg">
          </div>
        </div>
      </caption>

      <thead>
      <tr>
        <th class="player__vac"></th>
        <th class="player__avatar"></th>
        <th class="player__name"></th>
        <th class="player__rank"></th>
        <th class="player__kills">K</th>
        <th class="player__assist">A</th>
        <th class="player__deaths">D</th>
        <th class="player__diff helptext" title="Kill death difference">+/-</th>
        <th class="player__kd">K/D</th>
        <th v-if="store.state.matchDetails.parsed" class="player__adr helptext" title="Average damage per round">
          ADR
        </th>
        <th class="player__hs helptext" title="Percentage of kills with a headshot">HS%</th>
        <th class="player__rating helptext" title="Estimated HLTV Rating 1.0">Rating</th>
        <th class="player__mvp helptext" title="Most valuable player">MVP</th>
        <th class="player__score">Score</th>
      </tr>
      </thead>

      <tbody>
      <tr v-for="player in teamStats(1)"
          :key="player.player.steamid64"
          class="team-1">
        <ScoreTeamPlayer :assists="player.assists"
                         :avatar="player.player.avatar"
                         :color="player.color"
                         :deaths="player.deaths"
                         :dmg="player.dmg?.enemy"
                         :game_ban="player.player.game_ban"
                         :game_ban_date="player.player.game_ban_date"
                         :hs="player.headshot"
                         :kdiff="player.kills - player.deaths"
                         :kills="player.kills"
                         :mk_duo="player.multi_kills?.duo"
                         :mk_pent="player.multi_kills?.pent"
                         :mk_quad="player.multi_kills?.quad"
                         :mk_triple="player.multi_kills?.triple"
                         :mvp="player.mvp"
                         :name="player.player.name"
                         :parsed="store.state.matchDetails.parsed"
                         :player_score="player.score"
                         :rank_new="player.rank?.new"
                         :rank_old="player.rank?.old"
                         :rounds_played="store.state.matchDetails.score.reduce((a, b) => a + b)"
                         :steamid64="player.player.steamid64"
                         :tracked="player.player.tracked"
                         :vac="player.player.vac"
                         :vac_date="player.player.vac_date"
        />
      </tr>

      <tr class="hr_outer">
        <td colspan="14"></td>
      </tr>
      <tr class="hr">
        <td colspan="14"></td>
      </tr>
      <tr class="hr_outer">
        <td colspan="14"></td>
      </tr>

      <tr v-for="player in teamStats(2)"
          :key="player.player.steamid64"
          class="team-2">
        <ScoreTeamPlayer :assists="player.assists"
                         :avatar="player.player.avatar"
                         :color="player.color"
                         :deaths="player.deaths"
                         :dmg="player.dmg?.enemy"
                         :game_ban="player.player.game_ban"
                         :game_ban_date="player.player.game_ban_date"
                         :hs="player.headshot"
                         :kdiff="player.kills - player.deaths"
                         :kills="player.kills"
                         :mk_duo="player.multi_kills?.duo"
                         :mk_pent="player.multi_kills?.pent"
                         :mk_quad="player.multi_kills?.quad"
                         :mk_triple="player.multi_kills?.triple"
                         :mvp="player.mvp"
                         :name="player.player.name"
                         :parsed="store.state.matchDetails.parsed"
                         :player_score="player.score"
                         :rank_new="player.rank?.new"
                         :rank_old="player.rank?.old"
                         :rounds_played="store.state.matchDetails.score.reduce((a, b) => a + b)"
                         :steamid64="player.player.steamid64"
                         :tracked="player.player.tracked"
                         :vac="player.player.vac"
                         :vac_date="player.player.vac_date"
        />
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import ScoreTeamPlayer from '@/components/ScoreTeamPlayer.vue'
import {useStore} from "vuex";

export default {
  name: 'ScoreTeam',
  components: {ScoreTeamPlayer},
  setup() {
    const store = useStore()

    const teamStats = (team) => {
      let arr = []

      if (team === 1) {
        arr = []
        for (let i = 0; i < 5; i++) {
          arr.push(store.state.matchDetails.stats[i])
        }
      } else if (team === 2) {
        arr = []
        for (let i = 5; i < store.state.matchDetails.stats.length; i++) {
          arr.push(store.state.matchDetails.stats[i])
        }
      }

      return arr
    }

    return {store, teamStats}
  }
}
</script>

<style lang="scss" scoped>
.scoreboard {
  margin: 1rem 0;
}

hr {
  width: 900px;
}

table {
  width: 900px;
  text-align: center;

  caption {
    position: relative;
    color: white;
    caption-side: top;
    padding: 0;

    z-index: 0;

    .hidden {
      color: transparent;
      user-select: none;
    }

    .score-text {
      position: relative;
    }

    .team-1,
    .team-2 {
      position: absolute;
      font-size: 3rem;
      opacity: .8;

      margin-left: -100px;

      img {
        position: absolute;
        width: 30px;
        height: 30px;
        margin-top: 22px;
        margin-left: 10px;

        &:first-child {
          z-index: 1;
        }

        &:last-child {
          margin-left: 30px;
          z-index: 0 !important;
        }
      }
    }

    .team-1 {
      top: 85px;

      .score-text {
        margin-left: 5px;
      }
    }

    .team-2 {
      top: 180px;

      .score-text {
        top: 150px;
        margin-left: 5px;
      }
    }
  }

  tbody {
    position: relative;
    z-index: 1;
  }

  tr.team-1, tr.team-2 {
    height: 40px;
  }

  td {
    padding: 5px 10px;
  }

  .hr {
    td {
      height: 1px;
      padding: 0;
      background: white;
    }
  }

  .hr_outer {
    height: 15px;
  }

  .player__vac {
    width: 20px;
  }

}

@media (max-width: 1200px) {
  .scoreboard {
    margin-left: 65px;
  }
}

@media (max-width: 991px) {
  .scoreboard {
    margin-left: 2px;

    caption {
      display: none;
    }
  }
}
</style>
