<template>
  <div :style="{ minHeight: pHeight + 'px' }" class="overlay">
    <div class="match-wrapper">
      <div class="head row m-auto text-center">
        <div class="map-score">
          <div class="score-team-1">
            <h1
              :class="
                data.matchDetails.match_result === 1
                  ? 'text-success'
                  : data.matchDetails.match_result === 0
                  ? 'text-warning'
                  : 'text-danger'
              "
            >
              {{ data.score[0] }}
            </h1>
            <div class="team-1">
              <img alt="CT logo" src="/images/icons/ct_logo.svg" />
              <img alt="T logo" src="/images/icons/t_logo.svg" />
            </div>
            <div class="team-avg-rank">
              <img
                v-if="data.matchDetails.parsed"
                :alt="DisplayRank(Math.floor(data.team1Avg || 0))[1]"
                :src="DisplayRank(Math.floor(data.team1Avg || 0))[0]"
                :title="
                  'Average Team-Rank: ' +
                  DisplayRank(Math.floor(data.team1Avg || 0))[1]
                "
                class="team-avg-rank-icon helpicon"
              />
            </div>
          </div>
          <div class="m-auto map">
            <img
              v-if="data.matchDetails.map"
              :alt="data.matchDetails.map"
              :src="
                '/images/map_icons/map_icon_' + data.matchDetails.map + '.svg'
              "
              :title="FixMapName(data.matchDetails.map)"
              class="map-icon"
            />
            <img
              v-if="!data.matchDetails.map"
              :src="'/images/map_icons/map_icon_lobby_mapveto.svg'"
              alt="Map icon"
              class="map-icon"
              title="Map unknown"
            />
          </div>
          <div class="score-team-2">
            <h1
              :class="
                data.matchDetails.match_result === 2
                  ? 'text-success'
                  : data.matchDetails.match_result === 0
                  ? 'text-warning'
                  : 'text-danger'
              "
            >
              {{ data.score[1] }}
            </h1>
            <div class="team-2">
              <img alt="T logo" src="/images/icons/t_logo.svg" />
              <img alt="CT logo" src="/images/icons/ct_logo.svg" />
            </div>
            <div class="team-avg-rank">
              <img
                v-if="data.matchDetails.parsed"
                :alt="DisplayRank(Math.floor(data.team2Avg || 0))[1]"
                :src="DisplayRank(Math.floor(data.team2Avg || 0))[0]"
                :title="
                  'Average Team-Rank: ' +
                  DisplayRank(Math.floor(data.team2Avg || 0))[1]
                "
                class="team-avg-rank-icon helpicon"
              />
            </div>
          </div>
        </div>
        <div class="text">
          <p class="text-center text-muted fs-6 mb-1">
            Match lasted for
            <span class="text-white">{{
              FormatDuration(data.matchDetails.duration)
            }}</span>
          </p>
          <p class="text-center text-muted fs-6">
            on
            <span class="text-white">{{
              FormatFullDate(data.matchDetails.date)
            }}</span>
          </p>
          <div class="text-center fs-6">
            <img
              v-if="data.matchDetails.max_rounds === 16"
              alt="Match length"
              class="match-len helpicon"
              src="/images/icons/timer_short.svg"
              title="Short Match"
            />
            <img
              v-if="
                data.matchDetails.max_rounds === 30 ||
                !data.matchDetails.max_rounds
              "
              alt="Match length"
              class="match-len helpicon"
              src="/images/icons/timer_long.svg"
              title="Long Match"
            />

            <span v-if="data.matchDetails.parsed" class="text-muted px-2"
              >—</span
            >

            <img
              v-if="data.matchDetails.parsed"
              :alt="DisplayRank(Math.floor(data.matchDetails.avg_rank || 0))[1]"
              :src="DisplayRank(Math.floor(data.matchDetails.avg_rank || 0))[0]"
              :title="
                'Average Rank: ' +
                DisplayRank(Math.floor(data.matchDetails.avg_rank || 0))[1]
              "
              class="rank-icon helpicon"
            />

            <span
              v-if="data.matchDetails.parsed && data.matchDetails.replay_url"
              class="text-muted px-2"
              >—</span
            >

            <div
              v-if="data.matchDetails.parsed && data.matchDetails.replay_url"
              class="btn-group"
            >
              <i
                id="downloadMenuBtn"
                aria-hidden="true"
                class="fa fa-ellipsis-h mx-2"
                title="Click for more"
                @click.prevent="handleDownloadMenu"
              ></i>
              <div id="downloadGroup" class="group">
                <a
                  v-if="data.matchDetails.replay_url"
                  :href="data.matchDetails.replay_url"
                  target="_blank"
                  title="Download Demo"
                >
                  <i
                    id="downloadDemo"
                    aria-hidden="true"
                    class="fa fa-download mx-2"
                  ></i>
                </a>
                <a
                  v-if="data.matchDetails.share_code"
                  :href="
                    'steam://rungame/730/76561202255233023/+csgo_download_match ' +
                    data.matchDetails.share_code
                  "
                  target="_blank"
                  title="Watch Demo"
                >
                  <i
                    id="replayDemo"
                    aria-hidden="true"
                    class="fa fa-television mx-2"
                  ></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="nav navbar-dark navbar-expand-lg">
      <button
        aria-controls="matchNav"
        aria-expanded="false"
        aria-label="Toggle navigation"
        class="navbar-toggler"
        data-bs-target="#matchNav"
        data-bs-toggle="collapse"
        type="button"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div
        id="matchNav"
        class="collapse navbar-collapse justify-content-between"
      >
        <ul class="list-unstyled d-flex m-auto">
          <li
            :title="
              !data.matchDetails.parsed ? 'This demo has not been parsed' : ''
            "
            class="list-item nav-item"
          >
            <router-link
              :to="'/match/' + data.matchDetails.match_id"
              class="nav-link"
              replace
              >Scoreboard
            </router-link>
          </li>
          <li
            :title="
              !data.matchDetails.parsed ? 'This demo has not been parsed' : ''
            "
            class="list-item nav-item"
          >
            <router-link
              :class="!data.matchDetails.parsed ? 'disabled' : ''"
              :disabled="!data.matchDetails.parsed"
              :to="'/match/' + data.matchDetails.match_id + '/economy'"
              class="nav-link"
              replace
              >Economy
            </router-link>
          </li>
          <li
            :title="
              !data.matchDetails.parsed ? 'This demo has not been parsed' : ''
            "
            class="list-item nav-item"
          >
            <router-link
              :class="!data.matchDetails.parsed ? 'disabled' : ''"
              :disabled="!data.matchDetails.parsed"
              :to="'/match/' + data.matchDetails.match_id + '/details'"
              class="nav-link"
              replace
              >Details
            </router-link>
          </li>
          <li
            :title="
              !data.matchDetails.parsed ? 'This demo has not been parsed' : ''
            "
            class="list-item nav-item"
          >
            <router-link
              :class="!data.matchDetails.parsed ? 'disabled' : ''"
              :disabled="!data.matchDetails.parsed"
              :to="'/match/' + data.matchDetails.match_id + '/flashes'"
              class="nav-link"
              replace
              >Flashes
            </router-link>
          </li>
          <li
            :title="
              !data.matchDetails.parsed ? 'This demo has not been parsed' : ''
            "
            class="list-item nav-item"
          >
            <router-link
              :class="!data.matchDetails.parsed ? 'disabled' : ''"
              :disabled="!data.matchDetails.parsed"
              :to="'/match/' + data.matchDetails.match_id + '/damage'"
              class="nav-link"
              replace
              >Damage
            </router-link>
          </li>
          <li
            :title="
              !data.matchDetails.parsed ? 'This demo has not been parsed' : ''
            "
            class="list-item nav-item"
          >
            <router-link
              :class="!data.matchDetails.parsed ? 'disabled' : ''"
              :disabled="!data.matchDetails.parsed"
              :to="'/match/' + data.matchDetails.match_id + '/chat'"
              class="nav-link"
              replace
              >Chat
            </router-link>
          </li>
        </ul>
      </div>
    </div>

    <div id="scoreWrapper" class="scoreboard">
      <router-view v-if="data.score.length === 2 && data.stats" name="score" />
    </div>
  </div>
</template>

<script>
import {
  onBeforeMount,
  onBeforeUnmount,
  onMounted,
  reactive,
  ref,
  watch,
} from "vue";
import {
  closeNav,
  CreatePlayersArray,
  DisplayRank,
  errorHandling,
  FixMapName,
  FormatDuration,
  FormatFullDate,
  GetMatchDetails,
  GoToLink,
  LoadImage,
  ProcessName,
} from "/src/utils";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import { DateTime } from "luxon/build/es6/luxon";
import { FOOTER_HEIGHT, NAV_HEIGHT } from "/src/constants";

export default {
  name: "MatchView",
  props: ["match_id"],
  setup(props) {
    const store = useStore();
    const route = useRoute();
    const pHeight = ref(0);

    const matchIdPattern = /^\d{19}$/;

    // Refs
    const data = reactive({
      player_id: "",
      matchDetails: {},
      stats: [],
      score: [0],
      team1Avg: 0,
      team2Avg: 0,
    });

    const getWindowHeight = () => {
      const navHeight = document.getElementsByTagName("nav")[0].clientHeight;
      const footerHeight =
        document.getElementsByTagName("footer")[0].clientHeight;

      // 70 = nav-height | 108.5 = footer-height
      return window.innerHeight - navHeight - footerHeight;
    };

    pHeight.value = getWindowHeight();

    // Functions
    const GetMatch = async () => {
      if (matchIdPattern.test(props.match_id)) {
        const res = await GetMatchDetails(store, props.match_id);

        if (res !== null) {
          if (res.map)
            document.title = `${FixMapName(res.map)} ► ${res.score[0]} : ${
              res.score[1]
            } ◄ ${DateTime.fromSeconds(res.date).toLocaleString(
              DateTime.DATETIME_SHORT
            )} | csgoWTF`;
          else document.title = `Match-Details | csgoWTF`;

          store.commit({
            type: "changeMatchDetails",
            data: res,
          });

          checkRoute();
          data.matchDetails = store.state.matchDetails;

          data.matchDetails.stats.forEach((p) => {
            p.player.name = ProcessName(p.player.name);
          });

          data.stats = data.matchDetails.stats;
          data.score = data.matchDetails.score;

          // Set avg team ranks
          let pCount = 1;
          data.team1Avg =
            Math.floor(
              getTeamAvgRank(1).reduce((a, b) => {
                if (a !== 0 && b !== 0) pCount++;
                return a + b;
              })
            ) / pCount;

          pCount = 1;
          data.team2Avg =
            Math.floor(
              getTeamAvgRank(2).reduce((a, b) => {
                if (a !== 0 && b !== 0) pCount++;
                return a + b;
              })
            ) / pCount;

          LoadImage(data.matchDetails.map ? data.matchDetails.map : "random");

          store.commit({
            type: "changePlayersArr",
            data: CreatePlayersArray(data.stats),
          });

          // console.log(data.matchDetails)
        } else {
          document.querySelector(".bg-img").style.display = "none";
        }
      } else {
        errorHandling(404);
      }
    };

    const checkRoute = () => {
      if (route.fullPath.split("/")[3]) {
        const sub = route.fullPath.split("/")[3];
        if (matchIdPattern.test(props.match_id)) {
          GoToLink(`/match/${props.match_id}/${sub}`);
        } else {
          errorHandling(404);
        }
      } else {
        if (matchIdPattern.test(props.match_id))
          GoToLink(`/match/${props.match_id}`);
        else {
          errorHandling(404);
        }
      }
    };

    const getTeamAvgRank = (team) => {
      let arr = [];
      for (let i = (team - 1) * 5; i < team * 5; i++) {
        arr.push(
          data.matchDetails.stats[i].rank?.old !== undefined
            ? data.matchDetails.stats[i].rank?.old
            : 0
        );
      }
      return arr;
    };

    const handleDownloadMenu = () => {
      const downloadGroup = document.getElementById("downloadGroup");
      const menuBtn = document.getElementById("downloadMenuBtn");
      let opacity = window
        .getComputedStyle(menuBtn)
        .getPropertyValue("opacity");

      function show() {
        if (opacity < 1) {
          opacity = opacity + 0.1;
          downloadGroup.style.opacity = opacity;
        } else {
          clearInterval(0);
        }
      }

      function hide() {
        if (opacity > 0) {
          opacity = opacity - 0.1;
          menuBtn.style.opacity = opacity;
        } else {
          menuBtn.style.display = "none";
          downloadGroup.style.opacity = 0;
          downloadGroup.style.display = "block";
          setInterval(show, 35);
        }
      }

      setInterval(hide, 35);
    };

    // Watchers
    watch(() => props.match_id, GetMatch);

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

    onBeforeUnmount(() => {
      store.commit("resetMatchDetails");
    });

    onMounted(() => {
      const headHeight = 230;
      const navHeight = 42;

      const height =
        window.innerHeight -
        NAV_HEIGHT -
        FOOTER_HEIGHT -
        headHeight -
        navHeight;
      const scoreWrapper = document.getElementById("scoreWrapper");
      scoreWrapper.style.minHeight = height + "px";

      document.getElementById("app").style.background =
        "linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.85) 70%, rgba(0, 0, 0, .6) 100%)";
      document.querySelector(".bg-img").style.display = "initial";
    });

    window.onresize = () => {
      pHeight.value = getWindowHeight();
    };

    document.addEventListener("click", () => {
      closeNav("matchNav");
    });

    return {
      data,
      DisplayRank,
      FormatFullDate,
      FormatDuration,
      FixMapName,
      route,
      pHeight,
      handleDownloadMenu,
      getTeamAvgRank,
    };
  },
};
</script>

<style lang="scss" scoped>
.head {
  height: 230px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.55) 30%,
    rgba(0, 0, 0, 0.55) 70%,
    rgba(0, 0, 0, 0.3) 100%
  );

  .map-score {
    display: flex;
    position: relative;

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

    .score-team-1,
    .score-team-2 {
      position: absolute;
      top: 2rem;

      h1 {
        margin: 0 auto 0.5rem;
        font-size: 4rem;
      }

      .team-avg-rank {
        margin: 3.5rem auto 0;

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

      .team-1,
      .team-2 {
        position: relative;
        color: white;
        font-size: 1rem;
        opacity: 0.8;

        img {
          position: absolute;
          width: 30px;
          height: 30px;

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

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

      .team-1 {
        right: 1.4rem;
      }

      .team-2 {
        left: -1.5rem;
      }
    }

    .score-team-1 {
      left: 25%;
    }

    .score-team-2 {
      right: 25%;
    }
  }

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

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

    #downloadMenuBtn {
      cursor: pointer;
      font-size: 1.3rem;
      margin-left: -5px;
    }

    .group {
      display: none;
      margin-left: -5px;

      i {
        cursor: pointer;
        color: white;
        font-size: 1.3rem;

        &:hover,
        &:focus {
          color: var(--bs-warning);
        }
      }
    }
  }
}

.nav {
  max-width: 100vw;
  min-height: 42px;
  background: rgba(0, 0, 0, 0.9);
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.95) 30%,
    rgba(0, 0, 0, 0.95) 70%,
    rgba(0, 0, 0, 0.7) 100%
  );
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  .nav-link {
    text-decoration: none;
    color: white;

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

  .router-link-exact-active {
    background: var(--bs-info);
  }

  .disabled {
    color: #585858;

    &:hover {
      background: lime;
      cursor: default;
    }
  }
}

#scoreWrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.overlay {
  z-index: 2;
  width: 100%;
  max-width: 100vw;
}

@media (max-width: 991px) {
  .score-team-1,
  .score-team-2 {
    top: 1rem !important;

    h1 {
      font-size: 2.8rem !important;
      margin-bottom: 0 !important;
    }

    .team-avg-rank {
      margin: 2rem auto 0 !important;

      .team-avg-rank-icon {
        width: 50px !important;
      }
    }

    .team-1,
    .team-2 {
      img {
        width: 25px !important;
        height: 25px !important;
      }
    }

    .team-2 {
      left: -1.3rem !important;
    }
  }

  .score-team-1 {
    left: 10% !important;
  }

  .score-team-2 {
    right: 10% !important;
  }

  .nav {
    button {
      outline: 1px solid var(--bs-primary);
      margin-left: auto;
      float: right;
      margin-right: 1rem;

      &:focus {
        box-shadow: none;
        outline: 1px solid var(--bs-primary);
      }
    }

    .navbar-collapse {
      border-radius: 5px;
      border: 1px solid var(--bs-primary);

      ul {
        flex-direction: column;

        li {
          width: 100%;
          text-align: center;
        }
      }
    }
  }

  #scoreWrapper {
    justify-content: flex-start;
    overflow-x: scroll;
    overflow-y: hidden;
  }
}
</style>
