<template>
  <md-dialog :md-active.sync="showAuthDialog">
    <div class="md-layout md-alignment-bottom-center">
      <div class="md-layout-item md-size-70 md-small-size-100 md-alignment-bottom-center rounded-only">
        <div class="md-layout md-alignment-center-center" style="padding-top: 5%">
          <div v-if="this.$API.player.auth('steam')" v-on:click="moveTo('logout', 'steam')" class="clickable md-layout-item md-size-40">
            <SteamSvg class="img-server"/>
            <p class="p-auth" style="margin-bottom: -5%">Выйти</p>
            <p class="p-auth-logout">{{this.$API.player.store.steam_data['nickname']}}</p>
          </div>
          <div v-else v-on:click="moveTo('login', 'steam')" class="clickable md-layout-item md-size-40">
            <SteamSvg class="img-server"/>
            <p class="p-auth" style="margin-bottom: -5%">Войти через Steam</p>
            <p class="p-auth-logout">(жми на иконку)</p>
          </div>
          <!-- -------------------------------------------------------------------- -->
          <div v-if="this.$API.player.auth('discord')" v-on:click="moveTo('logout', 'discord')" class="clickable md-layout-item md-size-40">
            <DiscordSvg class="img-server"/>
            <p class="p-auth" style="margin-bottom: -5%">Выйти</p>
            <p class="p-auth-logout">{{this.$API.player.discord!==null?this.$API.player.discord.username:''}}</p>
          </div>
          <div v-else v-on:click="moveTo('login', 'discord')" class="clickable md-layout-item md-size-40">
            <DiscordSvg class="img-server"/>
            <p class="p-auth" style="margin-bottom: -5%">Войти через Discord</p>
            <p class="p-auth-logout">если хочешь на наш дискорд сервер, а так не надо</p>
          </div>
        </div>
        <div class="md-layout md-alignment-bottom-center">
          <div class="clickable md-layout-item md-size-15">
            <md-button class="md-right btn-default" v-on:click="closeAW()">Не хочу</md-button>
          </div>
        </div>
      </div>
    </div>
  </md-dialog>
</template>

<script>
import SteamSvg from "@/components/Others/CustomSvg/SteamSvg.vue";
import DiscordSvg from "@/components/Others/CustomSvg/DiscordSvg.vue";

export default {
  name: 'AuthWindow',
  components: {DiscordSvg, SteamSvg},
  data: () => ({
    showAuthDialog: false
  }),
  methods: {
    moveTo(action, service) {
      let subdomain = "tf2";
      if (location.host.indexOf("pblr-nyk.pro") !== -1) {
        subdomain = location.host.split(".")[0]
      }

      if (service === 'steam') {
        return window.open(`/api/auth/${action}?subdomain=${subdomain}`, '_self');
      }
      return window.open(`/api/auth/${service}/${action}`, '_self');
    },
    openAW() { this.showAuthDialog = true },
    closeAW() { this.showAuthDialog = false }
  }
}
</script>

<style>
.p-auth {
  text-align: center; font-size: 2em; color: #131213
}

.p-auth-logout {
  text-align: center; font-size: 1.5em; color: gray;
}

p-auth-mini {
  text-align: center; font-size: 1.5em; color: red;
}
</style>