<template >
  <v-container>
    <v-card align-center>
      <div class="text-center ma-3">
      <p class="text-center logowhite--text" style="font-size:30pt">User to edit:</p>
      <p class="text-center logowhite--text" style="font-size:30pt">{{username}}</p>
      
        
      </div>
    </v-card>
    <v-card align-center>
      <p class="text-center logowhite--text" style="font-size:30pt">User Information</p>

      <v-form>
        <v-text-field
          label="firstname"
          v-model="firstname"
          name="firstname"
          prepend-icon="mdi-account"
          type="text"
          color="primary"
        />
        <v-text-field
          label="lastname"
          v-model="lastname"
          name="lastname"
          prepend-icon="mdi-account"
          type="text"
          color="primary"
        />
      </v-form>

      <div class="text-center ma-3">
        <v-btn rounded color="logowhite" outlined dark v-on:click="editUserInformation()">Edit</v-btn>
      </div>
      <p id="noudata"></p>
    </v-card>
    <v-card align-center>
      <p class="text-center logowhite--text" style="font-size:30pt">Location</p>

      <v-form>
        <v-text-field
          label="latitude"
          v-model="latitude"
          name="latitude"
          prepend-icon="mdi-map-marker"
          type="text"
          color="primary"
        />
        <v-text-field
          label="longitude"
          v-model="longitude"
          name="longitude"
          prepend-icon="mdi-map-marker"
          type="text"
          color="primary"
        />
        <v-text-field
          label="radius"
          v-model="radius"
          name="radius"
          prepend-icon="mdi-map-marker-radius"
          type="text"
          color="primary"
        />
      </v-form>

      <div class="text-center ma-3">
        <v-btn rounded color="logowhite" outlined dark v-on:click="editLocation()">Edit</v-btn>
      </div>
      <p id="locationnotcomplete"></p>
    </v-card>
  </v-container>
</template>
<script>
import { baseUri} from "../variables";
export default {
  name: "Edituser",
  data: () => ({
    firstname: "",
    lastname: "",
    longitude: "",
    latitude: "",
    radius: "",
    username:  sessionStorage.getItem("usernameedit")
  }),

  methods: {
    editUserInformation() {
      var link = sessionStorage.getItem("edituser");
      document.getElementById("noudata").innerHTML = "";
      var suc;
      if (this.firstname != "" && this.lastname != "") {
        var xhttp = new XMLHttpRequest();
      
        xhttp.onreadystatechange = function() {
          if ((this.status == 200) & (this.readyState == 4)) {
          suc= true;
          }
        };
        xhttp.open("PATCH", link, false);
        xhttp.setRequestHeader("Content-Type", "application/json");

        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
        xhttp.send(
          "{" +
            '"firstname": "' +
            this.firstname +
            '", "lastname": "' +
            this.lastname +
            '"}'
        );
        if(suc == true ){
          this.$router.push("/users");
        }
      } else if (this.firstname != "") {
        var xhttpfirst = new XMLHttpRequest();

        xhttpfirst.onreadystatechange = function() {
          if ((this.status == 200) & (this.readyState == 4)) {
           suc = true;
          }
        };
        xhttpfirst.open("PATCH", link, false);
        xhttpfirst.setRequestHeader("Content-Type", "application/json");
        xhttpfirst.setRequestHeader(
          "Authorization",
          sessionStorage.getItem("jwt")
        );
        xhttpfirst.send("{" + '"firstname": "' + this.firstname + '"}');
        if(suc == true ){
          this.$router.push("/users");
        }
      } else if (this.lastname != "") {
        var xhttplast = new XMLHttpRequest();

        xhttplast.onreadystatechange = function() {
          if ((this.status == 200) & (this.readyState == 4)) {
            suc = true;
          }
        };
        xhttplast.open("PATCH", link, false);
        xhttplast.setRequestHeader("Content-Type", "application/json");
        xhttplast.setRequestHeader(
          "Authorization",
          sessionStorage.getItem("jwt")
        );
        xhttplast.send("{" + '"lastname": "' + this.lastname + '"}');
        if(suc == true ){
          this.$router.push("/users");
        }
      } else {
        document.getElementById("noudata").innerHTML = "please fill out at lest one field";
      }
    },
    editLocation() {
      var numericerror = false;
      var link = sessionStorage.getItem("edituser");
      if (this.longitude != "" && this.latitude != "" && this.radius) {
        var xhttp = new XMLHttpRequest();

        xhttp.onreadystatechange = function() {
          if ((this.status == 201) & (this.readyState == 4)) {
            var location = JSON.parse(xhttp.responseText);
            sessionStorage.setItem("locationlink", location._links.self.href);
          } else if(this.readyState == 4 ){
            
            
            numericerror = true;
            document.getElementById("locationnotcomplete").innerHTML = "Only numeric values are allowed";
          }
        };
        xhttp.open("POST", baseUri + "/locations", false);
        xhttp.setRequestHeader("Content-Type", "application/json");

        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
        xhttp.send(
          "{" +
            '"latitude": "' +
            this.latitude +
            '", "longitude": "' +
            this.longitude +
            '", "radius": "' +
            this.radius +
            '"}'
        );
        
        
        if (numericerror == false) {
        
          var xhttpadd = new XMLHttpRequest();
          var suc;
          xhttpadd.onreadystatechange = function() {
            if ((this.status == 200) & (this.readyState == 4)) {
              suc = true;
            }
          };
          xhttpadd.open("PATCH", link, false);
          xhttpadd.setRequestHeader("Content-Type", "application/json");
          xhttpadd.setRequestHeader(
            "Authorization",
            sessionStorage.getItem("jwt")
          );
          xhttpadd.send(
            "{" +
              '"location": "' +
              sessionStorage.getItem("locationlink") +
              '"}'
          );
          if (suc == true) {
              this.$router.push("/users");
          }
          document.getElementById("locationnotcomplete").innerHTML = "";
          sessionStorage.removeItem("locationlink");
        }
      } else {
        document.getElementById("locationnotcomplete").innerHTML = "please fill out all fields";
      }
    }
  },
  created() {
    var userxhttp = new XMLHttpRequest();
    userxhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var username = JSON.parse(userxhttp.responseText);     
        sessionStorage.setItem(
          "usernameedit",
          username.username
        );
      }
    };
    userxhttp.open("GET",sessionStorage.getItem("edituser"), false);

    userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));

    userxhttp.send(null);
    this.username = sessionStorage.getItem("usernameedit");
  }
  
  
};
</script>