<template>
  <div :style="{ minHeight: pHeight + 'px' }" class="wrapper">
    <div class="container-lg">
      <div v-if="playerDetailsStore.playerDetails.name">
        <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(
                    playerDetailsStore.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"
                    >{{ playerDetailsStore.playerDetails.name }}
                    <i class="fa fa-steam"></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.total) *
                              100
                            ).toFixed(0)
                          : 0
                      }}%
                    </td>
                    <td class="wlt-tie-rate">
                      {{
                        data.match_stats.tie > 0
                          ? (
                              (data.match_stats.tie / data.match_stats.total) *
                              100
                            ).toFixed(0)
                          : 0
                      }}%
                    </td>
                  </tr>
                </table>
                <div class="badges">
                  <img
                    v-if="playerDetailsStore.playerDetails.vac"
                    :title="
                      'VAC-Ban: ' +
                      FormatVacDate(
                        playerDetailsStore.playerDetails.vacDate,
                        matchDetailsStore.matchDetails.date
                      )
                    "
                    alt="Vac banned"
                    src="/images/icons/vac_banned.svg"
                  />
                  <img
                    v-if="playerDetailsStore.playerDetails.gameBan"
                    :title="
                      'Game-Ban: ' +
                      FormatVacDate(
                        playerDetailsStore.playerDetails.gameBanDate,
                        matchDetailsStore.matchDetails.date
                      )
                    "
                    alt="Game banned"
                    src="/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
                  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)"
                        required
                        type="text"
                      />
                    </div>

                    <!-- ShareCode input -->
                    <div class="form-outline mb-2">
                      <input
                        id="track-sharecode"
                        v-model="data.userData.sharecode"
                        :placeholder="
                          store.state.playerDetails.matches
                            ? 'ShareCode (optional)'
                            : 'ShareCode (required)'
                        "
                        :required="!store.state.playerDetails.matches"
                        class="form-control bg-secondary"
                        type="text"
                      />
                    </div>

                    <div class="form-outline mb-4">
                      <small>
                        <a
                          href="https://help.steampowered.com/en/wizard/HelpWithGameIssue/?appid=730&issueid=128"
                          target="_blank"
                        >
                          Here you can find your AuthCode and ShareCode
                        </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="fa fa-refresh fa-2x"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="match-container d-flex">
          <div class="matches">
            <MatchesTable
              v-if="playerDetailsStore.playerDetails.matches"
              :matches="playerDetailsStore.playerDetails.matches"
              color-front
            />
            <h5 v-else>Track yourself to see your matches</h5>
          </div>

          <div
            v-if="playerDetailsStore.playerDetails.matches"
            class="side-info-container"
          >
            <PlayerSideInfo :player_meta="data.playerMeta" />
          </div>
        </div>
        <div class="load-more col-lg-9 col-md-12 text-center">
          <button
            v-if="data.match_stats.total !== data.matches.length"
            :key="scrollToPos(scrollStateStore.scrollState)"
            class="btn border-2 btn-outline-info"
            @click="setMoreMatches"
          >
            Load More
          </button>
        </div>
      </div>

      <div v-else class="text-center pt-5">
        <h3>Player-Page</h3>
        <hr />
        <h6>There seems to be a problem loading the player</h6>
        <h6>Please try again later</h6>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  onBeforeMount,
  onBeforeUnmount,
  onMounted,
  reactive,
  ref,
  watch,
} from "vue";
import {
  constructAvatarUrl,
  FormatVacDate,
  GetPlayerMeta,
  GetUser,
  LoadImage,
  LoadMoreMatches,
  MatchNotParsedTime,
  ProcessName,
  SaveLastVisitedToLocalStorage,
  scrollToPos,
  setAppDivBackground,
  setBgImgDisplay,
  setTitle,
  TrackMe,
} from "@/utils";
import { FOOTER_HEIGHT, NAV_HEIGHT } from "@/constants";
import MatchesTable from "@/components/MatchesTable.vue";
import router from "@/router";
import PlayerSideInfo from "@/components/PlayerSideInfo.vue";
import { StatusCodes as STATUS } from "http-status-codes";
import { usePlayerDetailsStore } from "@/stores/playerDetails";
import type { LocalStoragePlayer, Match, PlayerMeta } from "@/types";
import { useSearchParamsStore } from "@/stores/searchParams";
import { useInfoStateStore } from "@/stores/infoState";
import { useScrollStateStore } from "@/stores/scrollState";
import { useMatchDetailsStore } from "@/stores/matchDetails";

// Variables
const pHeight = ref(0);
const displayCounter = 3;

const data = reactive({
  userData: {
    authcode: "",
    sharecode: "",
  },
  tracked: false,
  matches: [] as Match[],
  match_stats: {
    loss: 0,
    win: 0,
    tie: 0,
    total: 0,
  },
  playerMeta: {} as PlayerMeta,
});

const props = defineProps<{
  id: string;
}>();

const playerDetailsStore = usePlayerDetailsStore();
const matchDetailsStore = useMatchDetailsStore();
const searchParamsStore = useSearchParamsStore();
const scrollStateStore = useScrollStateStore();
const infoStateStore = useInfoStateStore();

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();

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

const SetPlayerData = async () => {
  data.tracked = playerDetailsStore.playerDetails.tracked;
  if (playerDetailsStore.playerDetails.matches)
    data.matches = playerDetailsStore.playerDetails.matches;
  if (playerDetailsStore.playerDetails.matchStats) {
    data.match_stats.loss =
      playerDetailsStore.playerDetails.matchStats.loss || 0;
    data.match_stats.win = playerDetailsStore.playerDetails.matchStats.win || 0;
    data.match_stats.tie = playerDetailsStore.playerDetails.matchStats.tie || 0;
    data.match_stats.total =
      data.match_stats.loss + data.match_stats.win + data.match_stats.tie;
  }

  searchParamsStore.id64 = playerDetailsStore.playerDetails.steamid64;
  searchParamsStore.vanity_url =
    playerDetailsStore.playerDetails.vanityUrl || "";

  if (playerDetailsStore.playerDetails.matches) {
    if (data.matches[0].map) {
      await LoadImage(data.matches[0].map);
    } else if (
      !data.matches[0].map &&
      MatchNotParsedTime(data.matches[0].date) &&
      data.matches[1].map
    ) {
      await LoadImage(data.matches[1].map);
    } else {
      await LoadImage("random");
    }
  } else {
    await LoadImage("random");
  }

  setAppDivBackground("rgba(0, 0, 0, 0.7)", HTMLDivElement);
  setBgImgDisplay("initial", HTMLImageElement);

  const localPlayer = reactive<LocalStoragePlayer>({
    steamId64: "",
    vanityUrl: "",
    name: "",
    avatar: "",
  });

  localPlayer.steamId64 = playerDetailsStore.playerDetails.steamid64;
  localPlayer.vanityUrl = playerDetailsStore.playerDetails.vanity_url || "";
  localPlayer.name = playerDetailsStore.playerDetails.name || "";
  localPlayer.avatar = constructAvatarUrl(
    playerDetailsStore.playerDetails.avatar || "",
    "medium"
  );
  SaveLastVisitedToLocalStorage(localPlayer);

  setTitle(playerDetailsStore.playerDetails.name || "");
};

const GetPlayer = async (reset = false) => {
  if (props.id) {
    const [resData, info] = await GetUser(props.id);

    if (info.message !== "") infoStateStore.addInfo(info);

    if (resData !== null) {
      if (
        resData.steamid64 !== playerDetailsStore.playerDetails.steamid64 ||
        reset
      ) {
        resData.name = ProcessName(resData.name);

        playerDetailsStore.$reset();
        playerDetailsStore.playerDetails = resData;
      }

      await SetPlayerData();
    }
  }
};

const setMoreMatches = async () => {
  const [res, info] = await LoadMoreMatches(
    playerDetailsStore.playerDetails.steamid64,
    data.matches[data.matches.length - 1].date
  );

  if (info.message !== "") infoStateStore.addInfo(info);
  if (res !== null) await res.matches?.forEach((e) => data.matches.push(e));

  scrollToPos(window.scrollY);

  // console.log(store.state.playerDetails)
};

const RefreshData = async () => {
  const refreshButton = document.querySelector(
    ".refresh-btn .fa"
  ) as HTMLElement;
  refreshButton.classList.add("fa-spin");
  refreshButton.classList.add("fa-fw");
  refreshButton.classList.remove("fa-refresh");
  refreshButton.classList.add("fa-spinner");
  scrollToPos(0);

  await GetPlayer(true).then(() => {
    setTimeout(() => {
      refreshButton.classList.remove("fa-spin");
      refreshButton.classList.remove("fa-fw");
      refreshButton.classList.add("fa-refresh");
      refreshButton.classList.remove("fa-spinner");
    }, 2000);
  });

  const [resData, info] = await GetPlayerMeta(props.id, displayCounter);

  if (info.message !== "") infoStateStore.addInfo(info);
  if (resData !== null) {
    data.playerMeta = resData;
  } else {
    data.playerMeta = {} as PlayerMeta;
  }
};

const TrackPlayer = async () => {
  let message = "";

  if (data.matches.length === 0) {
    if (data.userData.sharecode === "") {
      message = "Sharecode is missing";
    }
    if (data.userData.authcode === "") {
      message = "Authcode is missing";
    }
  } else {
    if (data.userData.authcode === "") {
      message = "Authcode is missing";
    }
  }

  if (message !== "") {
    infoStateStore.addInfo({
      statusCode: STATUS.IM_A_TEAPOT,
      message: message,
      type: "error",
    });
  } else {
    const info = await TrackMe(
      playerDetailsStore.playerDetails.steamid64,
      data.userData.authcode,
      data.userData.sharecode
    );

    if (info.message !== "") {
      infoStateStore.addInfo(info);
    } else if (info.statusCode === STATUS.ACCEPTED) {
      location.reload();
    }
  }
};

watch(
  () => props.id,
  async () => {
    await GetPlayer();
    const [res, info] = await GetPlayerMeta(props.id, displayCounter);

    if (info.message !== "") infoStateStore.addInfo(info);
    if (res !== null) {
      data.playerMeta = res;
    } else {
      data.playerMeta = {} as PlayerMeta;
    }
  }
);

onMounted(async () => {
  const height = window.innerHeight - NAV_HEIGHT - FOOTER_HEIGHT;
  const wrapper = document.querySelector(".wrapper") as HTMLDivElement;
  wrapper.style.minHeight = height + "px";

  await GetPlayer();

  const [res, info] = await GetPlayerMeta(props.id, displayCounter);
  if (info.message !== "") infoStateStore.addInfo(info);
  if (res !== null) {
    data.playerMeta = res;
  } else {
    data.playerMeta = {} as PlayerMeta;
  }

  scrollToPos(scrollStateStore.scrollState);

  // console.log(store.state.playerDetails)
});

onBeforeUnmount(() => {
  scrollStateStore.scrollState = window.scrollY;

  router.beforeEach((to, from, next) => {
    if (to.fullPath.match("/player/") && from.fullPath.match("/player/")) {
      scrollStateStore.$reset();
    }
    next();
  });
});

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

<style lang="scss" scoped>
.wrapper {
  .load-more {
    padding: 1rem 0;
  }

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

  .refresh-btn {
    cursor: pointer;

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

    .fa {
      font-size: 1.3rem;
    }
  }
}

.card {
  padding-top: 10px;

  .badges {
    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);
    }
  }

  .fa {
    font-size: 0.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;
    }
  }
}

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

  .matches {
    width: 75%;
  }

  .side-info-container {
    width: 25%;
  }
}

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

  .refresh-btn {
    &:hover,
    &:focus {
      .fa {
        color: white !important;
      }
    }
  }
}

@media screen and (max-width: 991px) {
  .card .avatar {
    height: 120px;
    width: 120px;
  }
  .match-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0;

    .matches {
      width: 100% !important;
    }

    .side-info-container {
      display: none !important;
    }
  }
}
</style>
