<template>
  <div id="addAccount">
  <div class="absoluteCentered">
      <p class="lead" id="title_addInstagram">Войдите в свой аккаунт Instagram</p>
      <p id="desc_addInstagram">Введите логин или пароль, войдите в свой Instagram. <br> Lift знает своё дело</p>
      <form>
        <div class="form-group">
          <input v-model="username" type="text" class="form-control lead input_addInstagram" placeholder="Имя пользователя Instagram">
          <input v-model="password" type="password" class="form-control lead input_addInstagram" placeholder="Пароль">
        </div>
        <button type="button" v-on:click="greet" class="btn btn-primary submit_addInstagram lead">Добавить</button><br>
        <template v-if="error">
          <div ref="errorText" class="p-3 mb-2 bg-danger text-white alert_addInstagram">{{errorText}}</div>
        </template>
        <template v-if="success">
        <div class="p-3 mb-2 bg-success text-white alert_addInstagram">{{successText}}</div>
        </template>

      </form>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'addAccount',
  methods: {
    greet: function(event) {
      let self = this;
      console.log(self);
      self.error = false;
      self.success = true;
      self.successText = "Обработка запроса..";
      axios.post('http://37.26.58.45:3000/api/instagram/login', {
        username: self.username,
        password: self.password
      })
      .then(function (response) {
        console.log(response);
        if(response.data.error){
          self.success = false;
          self.error = true;
          console.log(response.data.event);
          switch(response.data.event){
            case "AuthenticationError":
            self.errorText = "Неверный логин или пароль";
            break;
            case "RequestError":
            self.errorText = "Не удалось авторизироваться";
            break;
            case "unusable_password":
            self.errorText = "Пароль не действителен";
            break;
            case "missing_parameters":
            self.errorText = "Заполните все поля";
            break;
            case "unknown_error":
            self.errorText = "Неизвестная ошибка";
            break;
            case "CheckpointError":

              self.success = false;
              self.error = true;
              console.log(self.$el.innerHTML);
            this.errorText = "Требуется подтверждение <a href='{{response.data.url}}'>аккаунта</a>";
            break;
          }
        } else if(response.data.success){
          self.successText = "Успешно";
          self.error = false;
          self.success = true;
          if(response.data.account){
            let accounts = JSON.parse(localStorage.getItem('accounts')) || [];
            if(accounts.find(e => e.id.toString() === response.data.account.id.toString())){
              self.errorText = "Данный аккаунт уже добавлен";
              self.success = false;
              self.error = true;
              return null;
            }
            response.data.account.password = self.password;
            accounts.push(response.data.account);
            localStorage.setItem('accounts', JSON.stringify(accounts));
            self.$root.updateAccounts(accounts);
            self.$router.push('/');
          } else {
            alert("Не удалось опознать аккаунт");
          }
        }
      })
      .catch(function (error) {
        console.log(error);
      });
    }
  },
  data () {
    return {
      success: false,
      error: false,
      errorText: "Обработка ошибки..",
      successText: "Обработка..",
      username: "",
      password: "",
      subscriber: ""
    }
  }
}
</script>