<template>
  <div v-if="data.matches" id="matches">
    <table class="table table-borderless">
      <thead class="border-bottom">
      <tr>
        <th class="text-center map" scope="col">Map</th>
        <th class="text-center rank" scope="col">Rank</th>
        <th class="text-center length" scope="col" title="Match Length">
          <img alt="Match length" class="match-len" src="../assets/images/icons/timer_both.svg">
        </th>
        <th class="text-center score" scope="col">Score</th>
        <th class="text-center kills" scope="col" v-if="!props.explore">K</th>
        <th class="text-center assists" scope="col" v-if="!props.explore">A</th>
        <th class="text-center deaths" scope="col" v-if="!props.explore">D</th>
        <th class="text-center kdiff" scope="col" style="cursor: help" title="Kill-to-death ratio" v-if="!props.explore">+/-</th>
        <th class="text-center hltv" scope="col" style="cursor: help" title="HLTV 1.0 Rating" v-if="!props.explore">Rating</th>
        <th class="text-center duration" scope="col">Duration</th>
        <th class="date" scope="col">Date</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="match in data.matches"
          :key="match.match_id"
          :class="(match.stats ? GetWinLoss(match.match_result, match.stats.team_id) : '') + (match.vac || match.game_ban ? ' ban' : '')"
          :title="match.vac ? 'VAC-banned player in this game' : match.game_ban ? 'Game-banned player in this game' : ''"
          class="match default"
          @click="GoToMatch(match.match_id)"
      >
        <td class="td-map text-center">
          <i v-if="match.parsed" class="fa fa-bar-chart parsed" style="cursor: help"
             title="Demo has been parsed for additional data"></i>
          <i v-if="!match.parsed && MatchNotParsedTime(match.date)" class="fa fa-hourglass-half not-yet-parsed"
             style="cursor: help"
             title="Match has not been parsed yet"></i>
          <img v-if="match.map"
               :alt="match.map ? match.map : 'Map not found'"
               :src="match.map !== '' ? require('../assets/images/map_icons/map_icon_' + match.map + '.svg') : require('../assets/images/map_icons/map_icon_lobby_mapveto.svg')"
               :title="match.map"
               class="map-icon">
          <i v-else class="fa fa-question-circle-o map-not-found" title="Match not parsed"></i>
        </td>
        <td class="td-rank text-center">
          <img
              :alt="DisplayRank(match.stats.rank?.new)[1]"
              :class="match.stats.rank?.new > match.stats.rank?.old ? 'uprank' : match.stats.rank?.new < match.stats.rank?.old ? 'downrank' : ''"
              :src="DisplayRank(match.stats.rank?.new)[0]"
              :title="DisplayRank(match.stats.rank?.new)[1]"
              class="rank-icon" v-if="!props.explore">
          <img
              :alt="DisplayRank(Math.floor(match.avg_rank || 0))[1]"
              :src="DisplayRank(Math.floor(match.avg_rank || 0))[0]"
              :title="DisplayRank(Math.floor(match.avg_rank || 0))[1]"
              class="rank-icon" v-if="props.explore">
        </td>
        <td class="td-length text-center">
          <img v-if="match.max_rounds === 30 || !match.max_rounds" alt="Match long"
               class="match-len" src="../assets/images/icons/timer_long.svg">
          <img v-if="match.max_rounds === 16" alt="Match short" class="match-len"
               src="../assets/images/icons/timer_short.svg">
        </td>
        <td :class="match.stats ? match.stats.team_id === match.match_result ? 'text-success' : !match.match_result ? 'text-warning' : 'text-danger' : ''"
            class="td-score text-center fw-bold">
          {{ match.score[0] }} - {{ match.score[1] }}
        </td>
        <td class="td-kills text-center" v-if="match.stats">
          {{ match.stats.kills ? match.stats.kills : "0" }}
        </td>
        <td class="td-assists text-center" v-if="match.stats">
          {{ match.stats.assists ? match.stats.assists : "0" }}
        </td>
        <td class="td-deaths text-center" v-if="match.stats">
          {{ match.stats.deaths ? match.stats.deaths : "0" }}
        </td>
        <td :class="(match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
            class="td-plus text-center" v-if="match.stats">
          {{
            (match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0)
          }}
        </td>
        <td :class="GetHLTV_1(
                      match.stats.kills,
                      match.score[0] + match.score[1],
                      match.stats.deaths,
                      match.stats.multi_kills?.duo,
                      match.stats.multi_kills?.triple,
                      match.stats.multi_kills?.quad,
                      match.stats.multi_kills?.pent) >= 1 ? 'text-success' : 'text-warning'"
            class="td-hltv text-center fw-bold" v-if="match.stats">
          {{
            GetHLTV_1(
                match.stats.kills,
                match.score[0] + match.score[1],
                match.stats.deaths,
                match.stats.multi_kills?.duo,
                match.stats.multi_kills?.triple,
                match.stats.multi_kills?.quad,
                match.stats.multi_kills?.pent)
          }}
        </td>
        <td :title="FormatFullDuration(match.duration)" class="td-duration text-center">
          {{ FormatDuration(match.duration) }}

        </td>
        <td :title="FormatFullDate(match.date)" class="td-date">
          {{ FormatDate(match.date) }}
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import {FormatDate, FormatDuration, FormatFullDate, FormatFullDuration, GetHLTV_1, GetWinLoss, GoToMatch, MatchNotParsedTime, DisplayRank} from "@/utils";
import {onMounted, reactive, watch} from "vue";

export default {
  name: "MatchesTable",
  props: {
    matches: {
      type: Array,
      required: false
    },
    explore: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  setup(props) {
    const data = reactive({
      matches: []
    })

    onMounted(() => {
      data.matches = props.matches
    })

    watch(() => props.matches, () => {
      data.matches = props.matches
    })

    return {props, data, FormatDate, FormatFullDate, FormatDuration, FormatFullDuration, GetHLTV_1, GetWinLoss, GoToMatch, MatchNotParsedTime, DisplayRank}
  }
}
</script>

<style lang="scss" scoped>

table {
  margin-bottom: 0;

  tr {
    th {
      line-height: 1;
    }

    td {
      line-height: 60px;
      font-size: 1rem;
    }

    th:last-child, td:last-child {
      text-align: right;
      width: 150px;
    }

    th[title] {
      text-decoration: underline dotted grey;
    }

    td {
      vertical-align: middle;
    }

    .map {
      padding-left: 3rem;
    }

    .match-len {
      width: 18px;
      height: 18px;
    }

    .td-map {
      position: relative;
      padding-left: 3rem;
      text-align: left !important;
      width: 50px;

      .parsed {
        position: absolute;
        left: 7px;
        bottom: 23px;
        color: var(--bs-warning);
        font-size: 1.7rem;
      }

      .not-yet-parsed {
        position: absolute;
        left: 10px;
        bottom: 25px;
        color: darkgrey;
        font-size: 1.7rem;
      }

      .map-not-found {
        position: absolute;
        top: 4px;
        left: 48px;
        font-size: 4.35rem;
        color: rgba(255, 193, 7, .86);
      }

      img {
        width: 60px;
        height: auto;
      }
    }

    .td-rank {
      .uprank {
        box-shadow: 0 0 20px greenyellow;
        border: 1px solid greenyellow;
        border-radius: 5px;
      }

      .downrank {
        box-shadow: 0 0 20px #ff2f2f;
        border: 1px solid #ff2f2f;
        border-radius: 5px;
      }

      img {
        width: 70px;
        height: auto;

        .rank-icon {
          height: 35px;
        }
      }
    }

    .td-score {
      font-size: 1.2rem;
      width: 120px;
    }

    .td-date, .date {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .match {
    $first: rgb(0, 0, 0);
    $last: rgb(0, 0, 0);
    $win: false;
    $loss: false;
    $draw: false;
    $ban: false;

    &.default {
      background: linear-gradient(to right,
          rgba($first, 0.2) 0%,
          rgba($first, 0.1) 15%,
          rgba(0, 0, 0, 0.4) 30%,
          rgba(0, 0, 0, 0.4) 70%,
          rgba($last, 0.6) 80%,
          rgba($last, 0.6) 100%
      );

      &:hover {
        background: linear-gradient(to right,
            rgba($first, 0.3) 0%,
            rgba($first, 0.2) 15%,
            rgba(0, 0, 0, 0.5) 30%,
            rgba(0, 0, 0, 0.5) 70%,
            rgba($last, 0.7) 80%,
            rgba($last, 0.7) 100%
        );
      }
    }

    &.win {
      $first: rgb(0, 255, 0);
      background: linear-gradient(to right,
          rgba($first, 0.2) 0%,
          rgba($first, 0.1) 15%,
          rgba(0, 0, 0, 0.4) 30%,
          rgba(0, 0, 0, 0.4) 70%,
          rgba($last, 0.6) 80%,
          rgba($last, 0.6) 100%
      );

      &:hover {
        background: linear-gradient(to right,
            rgba($first, 0.3) 0%,
            rgba($first, 0.2) 15%,
            rgba(0, 0, 0, 0.5) 30%,
            rgba(0, 0, 0, 0.5) 70%,
            rgba($last, 0.7) 80%,
            rgba($last, 0.7) 100%
        );
      }
    }

    &.draw {
      $first: rgb(255, 255, 0);
      background: linear-gradient(to right,
          rgba($first, 0.2) 0%,
          rgba($first, 0.1) 15%,
          rgba(0, 0, 0, 0.4) 30%,
          rgba(0, 0, 0, 0.4) 70%,
          rgba($last, 0.6) 80%,
          rgba($last, 0.6) 100%
      );

      &:hover {
        background: linear-gradient(to right,
            rgba($first, 0.3) 0%,
            rgba($first, 0.2) 15%,
            rgba(0, 0, 0, 0.5) 30%,
            rgba(0, 0, 0, 0.5) 70%,
            rgba($last, 0.7) 80%,
            rgba($last, 0.7) 100%
        );
      }
    }

    &.loss {
      $first: rgb(255, 0, 0);
      background: linear-gradient(to right,
          rgba($first, 0.2) 0%,
          rgba($first, 0.1) 15%,
          rgba(0, 0, 0, 0.4) 30%,
          rgba(0, 0, 0, 0.4) 70%,
          rgba($last, 0.6) 80%,
          rgba($last, 0.6) 100%
      );

      &:hover {
        background: linear-gradient(to right,
            rgba($first, 0.3) 0%,
            rgba($first, 0.2) 15%,
            rgba(0, 0, 0, 0.5) 30%,
            rgba(0, 0, 0, 0.5) 70%,
            rgba($last, 0.7) 80%,
            rgba($last, 0.7) 100%
        );
      }
    }


    &.ban {
      $last: rgb(93, 3, 3);
      background: linear-gradient(to right,
          rgba($first, 0.2) 0%,
          rgba($first, 0.1) 15%,
          rgba(0, 0, 0, 0.4) 30%,
          rgba(0, 0, 0, 0.4) 70%,
          rgba($last, 0.6) 80%,
          rgba($last, 0.6) 100%
      );

      &:hover {
        background: linear-gradient(to right,
            rgba($first, 0.3) 0%,
            rgba($first, 0.2) 15%,
            rgba(0, 0, 0, 0.5) 30%,
            rgba(0, 0, 0, 0.5) 70%,
            rgba($last, 0.7) 80%,
            rgba($last, 0.7) 100%
        );
      }
    }

    border-bottom: 1px solid rgba(73, 73, 73, 0.73);

    &:last-child {
      border: none;
    }

    &:hover {
      cursor: pointer;
    }
  }
}

@media screen and (max-width: 768px) {
  .map {
    padding-left: 2.2rem !important;
  }

  .td-map {
    position: relative;
    padding-left: 2.2rem !important;
    width: 35px !important;

    .parsed {
      position: absolute;
      left: .3rem !important;
    }

    .not-yet-parsed {
      position: absolute;
      left: .3rem !important;
    }

    img {
      width: 40px !important;
      height: auto;
    }
  }
  .td-rank img {
    width: 50px !important;
    height: auto;
    max-width: 50px;
  }

  .td-score {
    font-size: 1rem !important;
    max-width: 90px;
  }

  .td-date {
    font-size: 1rem !important;
  }

  .kills, .deaths, .assists, .kdiff, .duration, .hltv, .length,
  .td-kills, .td-deaths, .td-assists, .td-plus, .td-duration, .td-hltv, .td-length {
    display: none;
  }
}

@media screen and (max-width: 991px) {
  .avatar {
    width: 100px !important;
    height: 100px !important;
  }
  .trackme-btn {
    top: 25px;
  }
  .map, .td-map {
    padding-left: 4rem !important;
  }
}

@media screen and (max-width: 1199px) {
  .td-plus, .kdiff {
    display: none;
  }
}
</style>
