<template>
  <md-tab id="profileView" :md-icon="require('@/assets/profile-user.svg')">
    <div class="md-layout md-alignment-bottom-center">
      <CharacterImage :size="10" :img_src="require(`@/assets/images/characters/pyro.png`)" :audio_src="require(`@/assets/sounds/alertmgs.mp3`)" :hide_if_small="true"/>
    </div>
    <div class="md-layout md-alignment-bottom-center">
      <div class="md-layout-item md-size-25 md-small-size-100 md-alignment-bottom-center rounded-and-colored" style="z-index: 1">
        <h3 class="txt-innert" style="text-align: center; margin: 4% 0%">Профиль</h3>
      </div>
    </div>
    <div class="md-layout md-alignment-bottom-center" style="margin-top: -1.5%">
      <div class="md-layout-item md-size-50 md-small-size-100 md-alignment-bottom-center rounded-only">
        <hr width="50%">
        <div v-if="this.$API.player.auth('steam') === false" class="clickable">
          <h2 class="auth-button" v-on:click="openAW()">АВТОРИЗОВАТЬСЯ</h2>
          <p style="text-align: center">Зачем это делать?</p>
          <p style="text-align: center">Ты можешь смотреть статистику своего профиля или других игроков, отправлять репорты и узнавать сразу о своем бане.</p>
          <p style="text-align: center">Так-же если ты горишь желанием зайти в наш уютненький дискордик, то на этой странице можно будет привязать дискорд к стиму чтоб зайти.</p>
        </div>
        <div v-else>
          <ProfileContainer :player="$API.player.store"/>
          <md-button v-on:click="$refs.pv_fp.showFPD()" class="btn-gosty" style="margin: 3% 5%">Найти игрока
            <md-tooltip class="tooltip" md-direction="bottom">Ищи других игроков здесь</md-tooltip>
          </md-button>
          <md-button v-on:click="$refs.pv_dw.openDW()" class="btn-old" style="margin: 3% 0%">Привязать стим к дискорду
            <md-tooltip class="tooltip" md-direction="bottom">Хочешь к нам на сервер дискорд?</md-tooltip>
          </md-button>
          <md-button class="btn-boss" v-on:click="logout()" style="float: right; margin: 3% 5%">Выйти
            <md-tooltip class="tooltip" md-direction="bottom">Выйти из своего аккаунта STEAM</md-tooltip>
          </md-button>
        </div>
      </div>
    </div>
    <FindPlayer ref="pv_fp"/>
    <AuthWindow ref="aw"/>
    <DiscordWindow ref="pv_dw"/>
  </md-tab>
</template>

<script>
import CharacterImage from "@/components/Others/Images/CharacterImage.vue";
import AuthWindow from "@/components/Others/Auth/AuthWindow.vue";
import ProfileContainer from "@/components/TabsMenuElements/ProfileView/Components/ProfileContainer.vue";
import FindPlayer from "@/components/ActionDialogs/FindPlayer.vue";
import DiscordWindow from "@/components/Others/Auth/DiscordWindow.vue";
export default {
  name: 'ProfileView',
  props: {
    avatar: {
      type: String
    }
  },
  components: {DiscordWindow, FindPlayer, ProfileContainer, AuthWindow, CharacterImage},
  methods: {
    openAW() {
      console.log('open auth window');
      this.$refs.aw.showAuthDialog = true;
    },
    logout() {
      this.$refs.aw.moveTo("logout", "steam");
    }
  }
}
</script>

<style>
.auth-button {
  text-align: center
}

.auth-button:hover {
  text-decoration-line: underline;
  cursor: pointer;
}
</style>