<template>
  <md-dialog :md-active.sync="showFindPlayerDialog" @close="showFindPlayerDialog=false">
    <div class="md-layout md-alignment-bottom-center">
      <div class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only">
        <h5 style="text-align: center; padding-left: 5%; padding-right: 5%;">Введи что-то из предложенного</h5>
        <md-field style="padding-left: 5%; padding-right: 5%;" :class="playerany">
          <label style="padding-left: 5%; padding-right: 5%">{{'Steam|Ник|#ид бана|<@discordid>'}}</label>
          <md-input v-model="player_string"></md-input>
          <span class="md-error" style="padding-left: 5%; padding-right: 5%">{{not_found}}</span>
        </md-field>
        <md-button v-on:click="foundPlayer()" style="color: #131213; font-family: tf2build; background: lightgreen">Узнать</md-button>
        <md-button v-on:click="closeFPD()" style="color: #131213; font-family: tf2build; background: #bd2200">Передумал</md-button>
        <md-button v-on:click="closeFPD()" style="color: #131213; font-family: tf2build; background: #fd8846">Удалить себя</md-button>
        <ProfileViewer ref="pv" :steam64="player_steam64"/>
      </div>
    </div>
  </md-dialog>
</template>

<script>
import ProfileViewer from "@/components/Others/Loader/ProfileViewer.vue";
import axios from "axios";

export default {
  name: "FindPlayer",
  components: {ProfileViewer},
  data: () => ({
    player_string: "",
    player_steam64: "",
    showFindPlayerDialog: false,
    not_found: null
  }),
  computed: {
    playerany () {
      return {
        'md-invalid': this.not_found != null
      }
    }
  },
  methods: {
    foundPlayer() {
      this.not_found = null;
      if (this.player_string.length === 0) return;
      this.player_steam64 = "";
      axios.post("/api/profile/steam/web", {"any":this.player_string})
          .then(response => {
            if (response.status === 200 && response.data && 'steam64' in response.data) {
              console.log(response.data);
              this.player_steam64 = response.data['steam64'];
            } else {
              switch (response.status) {
                default: {this.not_found = "Такого игрока нету"; break;}
              }
            }
          })
          .catch(() => {
            this.not_found = "Слишком много запросов...";
          }).finally(() => {
            this.$refs.pv.getPlayer();
      })
    },
    showFPD(){
      this.showFindPlayerDialog = true;
    },
    closeFPD(){
      this.showFindPlayerDialog = false;
    }
  }
}
</script>

<style>
.md-field::after{
  background-color: rgba(253, 136, 70, 0.1);
}

.md-field::before{
  background-color: rgba(253, 136, 70);
}

.md-field.md-focused::after{
  background-color: rgba(253, 136, 70);
}
</style>