<template>
  <img alt="" class="bg-img" src="">
  <div class="wrapper">
    <div class="container">
      <div class="card mb-3 bg-transparent border-0">
        <div class="row g-0">
          <div class="img-container col-md-2 pt-3">
            <img
                :class="data.tracked ? 'tracked' : ''"
                :src="constructAvatarUrl(store.state.playerDetails.avatar, 'full')"
                :title="data.tracked ? 'Tracked' : ''"
                alt="Player avatar"
                class="img-fluid avatar">
          </div>
          <div class="col-md-8 d-flex">
            <div class="card-body">
              <h3 class="card-title"><a
                  :href="/^\d{17}$/.test(props.id) ? 'https://steamcommunity.com/profiles/' + props.id : 'https://steamcommunity.com/id/' + props.id"
                  class="text-decoration-none text-white"
                  target="_blank"
                  title="Open steam profile">{{
                  store.state.playerDetails.name
                }}
                <i class="fas fa-link"></i>
              </a></h3>
              <table class="table table-borderless text-center">
                <tr>
                  <th class="wlt-win text-uppercase text-muted">Wins</th>
                  <th class="wlt-loss text-uppercase text-muted">Losses</th>
                  <th class="wlt-tie text-uppercase text-muted">Ties</th>
                  <th class="wlt-win-rate text-uppercase text-muted">Win-Rate</th>
                  <th class="wlt-tie-rate text-uppercase text-muted">Tie-Rate</th>
                </tr>
                <tr>
                  <td class="wlt-win">{{ data.match_stats.win }}</td>
                  <td class="wlt-loss">{{ data.match_stats.loss }}</td>
                  <td class="wlt-tie">{{ data.match_stats.tie }}</td>
                  <td class="wlt-win-rate">{{
                      data.match_stats.win > 0 ? (data.match_stats.win / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(0) : 0
                    }}%
                  </td>
                  <td class="wlt-tie-rate">{{
                      data.match_stats.tie > 0 ? (data.match_stats.tie / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(0) : 0
                    }}%
                  </td>
                </tr>
              </table>
              <div class="badges">
                <img v-if="store.state.playerDetails.vac"
                     :title="'VAC-Ban: ' + FormatVacDate(store.state.playerDetails.vac_date, store.state.matchDetails.date)"
                     alt="Vac banned"
                     src="../assets/images/icons/vac_banned.svg">
                <img v-if="store.state.playerDetails.game_ban"
                     :title="'Game-Ban: ' + FormatVacDate(store.state.playerDetails.game_ban_date, store.state.matchDetails.date)"
                     alt="Game banned"
                     src="../assets/images/icons/game_banned.svg">
              </div>
            </div>
            <div v-if="!data.tracked" class="dropdown trackme-btn">
              <button
                  id="login-dropdown"
                  aria-expanded="false"
                  class="btn border-2 btn-outline-info"
                  data-bs-toggle="dropdown"
                  type="button"
              >
                Track Me!
              </button>
              <div v-if="data.statusErrorCode === 202" class="alert alert-success" role="alert">
                {{ data.statusError }}
              </div>
              <div v-if="data.statusErrorCode === 418" class="alert alert-warning" role="alert">
                {{ data.statusError }}
              </div>
              <div v-if="data.statusErrorCode !== 0 && data.statusErrorCode !== 202 && data.statusErrorCode !== 418"
                   class="alert alert-danger"
                   role="alert">
                {{ data.statusError }}
              </div>
              <div aria-labelledby="login-dropdown" class="dropdown-menu mt-2 border-2 border-primary bg-body"
                   style="width: 320px">
                <form class="px-4 py-3">
                  <!-- AuthCode input -->
                  <div class="form-outline mb-4">
                    <input id="track-authcode" v-model="data.userData.authcode" class="form-control bg-secondary"
                           placeholder="AuthCode*"
                           required type="text"/>
                  </div>

                  <!-- ShareCode input -->
                  <div class="form-outline mb-2">
                    <input id="track-sharecode" v-model="data.userData.sharecode" class="form-control bg-secondary"
                           placeholder="ShareCode"
                           type="text"/>
                  </div>

                  <div class="form-outline mb-4">
                    <small>You can find your AuthCode and ShareCode <a
                        href="https://help.steampowered.com/en/wizard/HelpWithGameIssue/?appid=730&issueid=128"
                        target="_blank">here</a>.</small>
                  </div>

                  <!-- Submit button -->
                  <button class="btn btn-outline-warning border-2" type="submit"
                          @click.prevent="TrackPlayer">
                    TrackMe
                  </button>
                </form>
              </div>
            </div>
            <div v-if="data.tracked" class="refresh-btn" title="Refresh Match-List" @click="RefreshData">
              <i class="fas fa-sync"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="match-container">
        <div class="matches">
          <table v-if="store.state.playerDetails.matches" 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 class="match-len" src="../assets/images/icons/timer_both.svg" alt="Match length">
              </th>
              <th class="text-center score" scope="col">Score</th>
              <th class="text-center kills" scope="col">K</th>
              <th class="text-center assists" scope="col">A</th>
              <th class="text-center deaths" scope="col">D</th>
              <th class="text-center kdiff" scope="col" style="cursor: help" title="Kill-to-death ratio">+/-</th>
              <th class="text-center hltv" scope="col" style="cursor: help" title="HLTV 1.0 Rating">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="GetWinLoss(match.match_result, match.stats.team_id)"
                class="match"
                @click="GoToMatch(match.match_id)">
              <td class="td-map text-center">
                <i v-if="match.parsed" class="far fa-chart-bar parsed" style="cursor: help"
                   title="Demo has been parsed for additional data"></i>
                <img :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">
              </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">
              </td>
              <td class="td-length text-center">
                <img class="match-len" v-if="match.max_rounds === 30 || !match.max_rounds" src="../assets/images/icons/timer_long.svg" alt="Match long">
                <img class="match-len" v-if="match.max_rounds === 16" src="../assets/images/icons/timer_short.svg" alt="Match short">
              </td>
              <td :class="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">
                {{ match.stats.kills ? match.stats.kills : "0" }}
              </td>
              <td class="td-assists text-center">
                {{ match.stats.assists ? match.stats.assists : "0" }}
              </td>
              <td class="td-deaths text-center">
                {{ 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">
                {{
                  (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">
                {{
                  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>
          <h5 v-else>No matches on record</h5>
        </div>
        <div v-if="store.state.playerDetails.matches" class="side-info">
          <div class="side-info-box best-mate">
            <div class="heading">
              <h5>Best Mate</h5>
            </div>
            <hr>
            <ul class="list-unstyled">
              <li>Mate 1</li>
              <li>Mate 2</li>
              <li>Mate 3</li>
              <li>Mate 4</li>
              <li>Mate 5</li>
            </ul>
          </div>
          <div class="side-info-box best-mate">
            <div class="heading">
              <h5>Most played with</h5>
            </div>
            <hr>
            <ul class="list-unstyled">
              <li>Player 1</li>
              <li>Player 2</li>
              <li>Player 3</li>
              <li>Player 4</li>
              <li>Player 5</li>
            </ul>
          </div>
          <div class="side-info-box best-mate">
            <div class="heading">
              <h5>Preferred Weapons</h5>
            </div>
            <hr>
            <ul class="list-unstyled">
              <li>Weapon 1</li>
              <li>Weapon 2</li>
              <li>Weapon 3</li>
              <li>Weapon 4</li>
              <li>Weapon 5</li>
            </ul>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {onBeforeMount, onBeforeUnmount, reactive, watch} from "vue";
import {useStore} from "vuex";
import {
  constructAvatarUrl,
  DisplayRank,
  FormatDate,
  FormatDuration,
  FormatFullDate,
  FormatFullDuration,
  GetHLTV_1,
  GetUser,
  GetWinLoss,
  GoToLink,
  GoToMatch,
  LoadImage,
  SaveLastVisitedToLocalStorage,
  setTitle,
  TrackMe,
  FormatVacDate
} from "../utils";

export default {
  name: 'Player',
  props: ['id'],
  setup(props) {
    // Variables
    const store = useStore()

    const data = reactive({
      userData: {
        authcode: '',
        sharecode: ''
      },
      tracked: false,
      matches: [],
      statusError: '',
      statusErrorCode: 0,
      match_stats: {
        loss: 0,
        win: 0,
        tie: 0,
      }
    })

    onBeforeMount(() => {
          if (Object.entries(store.state.playerDetails).length === 0) {
            GetPlayer()
          } else {
            console.log(store.state.playerDetails)
            SetPlayerData()
          }
        }
    )

    const SetPlayerData = () => {
      data.tracked = store.state.playerDetails.tracked
      if (store.state.playerDetails.matches)
        data.matches = store.state.playerDetails.matches
      if (store.state.playerDetails.match_stats) {
        data.match_stats.loss = store.state.playerDetails.match_stats.loss || 0
        data.match_stats.win = store.state.playerDetails.match_stats.win || 0
        data.match_stats.tie = store.state.playerDetails.match_stats.tie || 0
      }

      store.commit({
        type: 'changeId64',
        id: store.state.playerDetails.steamid64
      })
      store.commit({
        type: 'changeVanityUrl',
        id: store.state.playerDetails.vanity_url || ''
      })

      if (store.state.playerDetails.matches)
        LoadImage(data.matches[0].map ? data.matches[0].map : 'random')

      let player = {
        'steamid64': store.state.playerDetails.steamid64,
        'vanity_url': store.state.playerDetails.vanity_url || '',
        'name': store.state.playerDetails.name,
        'avatar': constructAvatarUrl(store.state.playerDetails.avatar, 'medium')
      }
      SaveLastVisitedToLocalStorage(player)

      setTitle(store.state.playerDetails.name)
    }

    const GetPlayer = async () => {
      if (props.id) {
        const [res, resData] = await GetUser(props.id)

        if (res === 200 && resData) {
          store.commit({
            type: 'changePlayerDetails',
            data: resData
          })

          SetPlayerData()

          console.log(store.state.playerDetails)
        } else {
          GoToLink('/')
          // TODO: needs 404
        }
      } else {
        GoToLink('/')
        // TODO: needs 404
      }
    }

    const RefreshData = async () => {
      const refreshButton = document.querySelector('.refresh-btn .fas')
      refreshButton.classList.add('animate')

      await GetPlayer().then(() => {
        setTimeout(() => {
          refreshButton.classList.remove('animate')
        }, 2000)
      })
    }

    const TrackPlayer = async () => {
      if (data.userData.authcode !== '') {
        [data.statusErrorCode, data.statusError] = await TrackMe(store.state.playerDetails.steamid64, data.userData.authcode, data.userData.sharecode)

        if (data.statusErrorCode === 202) {
          data.statusErrorCode = 0
          data.statusError = ''
          data.tracked = true
        } else {
          setTimeout(() => {
            data.statusError = ''
            data.statusErrorCode = 0
          }, 5000)
        }
      }
    }

    watch(() => props.id, GetPlayer)

    onBeforeUnmount(() => {
      store.commit('resetPlayerDetails')
    })

    return {
      data,
      store,
      props,
      TrackPlayer,
      RefreshData,
      TrackMe,
      GetWinLoss,
      FormatDate,
      FormatFullDate,
      FormatDuration,
      FormatFullDuration,
      GoToMatch,
      GetHLTV_1,
      DisplayRank,
      constructAvatarUrl,
      FormatVacDate
    }
  }
}
</script>

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

.wrapper {
  padding-bottom: 1rem;
  background: rgba(0, 0, 0, .7);
  min-width: 100%;
  min-height: 100%;

  .trackme-btn,
  .refresh-btn {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .refresh-btn {
    cursor: pointer;

    &:hover .fas {
      color: var(--bs-warning);
    }

    .fas {
      font-size: 1.3rem;

      &.animate {
        animation: refresh 2s infinite;
      }
    }

  }

  @keyframes refresh {
    0% {
      transform: rotate(0deg) scale(1);
    }
    10% {
      transform: rotate(-15deg) scale(1);
    }
    50% {
      transform: rotate(180deg) scale(1.4);
    }
    100% {
      transform: rotate(360deg) scale(1);
    }
  };
}

.card {
  padding-top: 10px;

  .badges {
    width: 70%;
    height: 30px;

    img {
      width: auto;
      height: 100%;
      margin-right: 5px;
    }
  }

  .avatar {
    border-radius: 50%;
    height: 150px;
    width: 150px;
    box-shadow: 0 0 10px black;

    &.tracked {
      box-shadow: 0 0 20px 5px var(--bs-success);
    }
  }

  .fas, .far {
    font-size: .75rem;
    vertical-align: top;
  }

  table {
    max-width: 500px;

    .wlt-win, .wlt-loss, .wlt-tie {
      text-align: start;
      max-width: 70px;
      margin: 0;
      padding: 0;
    }

    .wlt-tie-rate, .wlt-win-rate {
      text-align: end;
      max-width: 90px;
    }
  }
}

.win {
  background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, rgba(20, 20, 20, .8) 15%, rgba(20, 20, 20, .8) 100%);

  &:hover {
    background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, rgba(30, 30, 30, .9) 15%, rgba(30, 30, 30, .9) 100%);
  }
}

.loss {
  background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, rgba(20, 20, 20, .8) 15%, rgba(20, 20, 20, .8) 100%);

  &:hover {
    background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, rgba(30, 30, 30, .9) 15%, rgba(30, 30, 30, .9) 100%);
  }
}

.draw {
  background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, rgba(20, 20, 20, .8) 15%, rgba(20, 20, 20, .8) 100%);

  &:hover {
    background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, rgba(30, 30, 30, .9) 15%, rgba(30, 30, 30, .9) 100%);
  }
}

.match-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1rem;

  .matches {
    width: 75%;
  }

  .side-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    width: 25%;
    height: auto;
    margin-top: 30px;

    .side-info-box {
      width: 100%;
      height: auto;
      background: rgba(20, 20, 20, .8);
      border: 1px solid rgba(white, .3);
      border-radius: 5px;
    }

    .best-mate {
      .heading {
        display: flex;
        align-items: center;
        justify-content: center;

        height: 40px;

        h5 {
          margin: 0;
          padding: 0;
        }
      }

      hr {
        margin: 0;
        border-color: rgba(white, .3);
      }

      ul {
        padding: 10px;
      }
    }
  }
}

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;
        top: 27px;
        color: var(--bs-warning);
        font-size: 1.5rem;
      }

      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 {
    border-bottom: 1px solid rgba(73, 73, 73, 0.73);

    &:last-child {
      border: none;
    }

    &:hover {
      cursor: pointer;
    }
  }

}

@media screen and (max-width: 768px) {
  .card {
    .avatar {
      height: 75px !important;
      width: 75px !important;
    }
  }
  .trackme-btn,
  .refresh-btn {
    top: 25px;
  }

  .map {
    padding-left: 2.2rem !important;
  }

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

    .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) {
  .matches {
    width: 100% !important;
  }
  .side-info {
    display: none !important;
  }
  .avatar {
    width: 100px !important;
    height: 100px !important;
  }
  .trackme-btn {
    top: 25px;
  }
}

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