<template>
  <f7-page name="editprofile">
    <f7-navbar title="Edit Profile" back-link="Back"></f7-navbar>
    <div class="wrapper">
      <img class="image--cover" :src="image_url" alt @click="launchFilePicker" />
    </div>
    <div class="align-center">
      <div class="list inline-labels no-hairlines-md">
        <ul>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Display Name</div>
              <div class="item-input-wrap">
                <input
                  :value="display_name"
                  @input="display_name=$event.target.value"
                  type="text"
                  placeholder="Display name"
                  required
                  validate
                />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>

          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Your Location</div>
              <div class="item-input-wrap">
                <input
                  :value="user_location"
                  @input="user_location=$event.target.value"
                  type="text"
                  placeholder="Enter Your Location"
                  required
                  validate
                />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>

          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Profile Message</div>
              <div class="item-input-wrap">
                <textarea
                  :value="profile_message"
                  @input="profile_message=$event.target.value"
                  class="resizable"
                  placeholder="Enter Your Profile Message"
                  maxlength="200"
                ></textarea>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <f7-block>
        <f7-button outline @click="updateProfile">Update Profile</f7-button>
        <input type="file" ref="file" style="display:none;" @change="onFilePicked" />
      </f7-block>
    </div>
  </f7-page>
</template>

<script>
import firebase from "firebase";
import { mixin } from "../../js/mixin";
export default {
  mixins: [mixin],
  data() {
    return {
      name: null,
      email: null,
      password: null
    };
  },
  computed: {
    display_name: {
      get: function() {
        return this.$store.getters.display_name;
      },
      set: function(newValue) {
        this.$store.commit("setDisplayName", newValue);
      }
    },
    user_location: {
      get: function() {
        return this.$store.getters.user_location;
      },
      set: function(newValue) {
        this.$store.commit("setUserLocation", newValue);
      }
    },
    profile_message: {
      get: function() {
        return this.$store.getters.profile_message;
      },
      set: function(newValue) {
        this.$store.commit("setProfileMessage", newValue);
      }
    },
    image_url() {
      return this.$store.getters.image_url;
    },
    files() {
      return this.$store.getters.files;
    },
    photo_url() {
      return this.$store.getters.photo_url;
    }
  },
  watch: {},

  methods: {
    launchFilePicker() {
      this.$refs.file.click();
    },
    onFilePicked() {
      //read the image file
      this.$store.dispatch("readFile", "setImageURL");
    },
    updateProfile() {
      const self = this;

      //check user sent
      if (self.display_name.length < 2) {
        self.$store.commit("setAlertMessage", "Display name is too short");
        return;
      }

      //check location
      if (self.user_location.length < 2) {
        self.$store.commit("setAlertMessage", "Your location is too short");
        return;
      }

      //check profile message
      if (self.profile_message.length < 10) {
        self.$store.commit("setAlertMessage", "profile message is too short");
        return;
      }

      if (self.files) {
        //console.log("files to update", this.photo_url);
        var user = firebase.auth().currentUser;
        if (this.photo_url != null) {
          var storage = firebase.storage();
          var httpReference = storage.refFromURL(this.photo_url);
          //console.log("httpReference", httpReference);
          httpReference
            .delete()
            .then(() => {})
            .catch(err => {
              console.log(err);
            });
        }
        self.$store.dispatch("uploadFile", "profile/").then(url => {
          user
            .updateProfile({
              displayName: self.display_name,
              photoURL: url
            })
            .then(function() {
              self.$store.commit("setPhotoURL", user.photoURL);
              self.$store.commit("setDisplayName", user.displayName);
              firebase
                .database()
                .ref("users/" + user.uid)
                .update({
                  photo_url: user.photoURL,
                  name: user.displayName,
                  location: self.user_location,
                  profileMessage: self.profile_message
                });
              self.$store.commit(
                "setAlertMessage",
                "Your profile has been updated"
              );
            })
            .catch(err => {
              console.log(err);
            });
        });
      } else {
        //console.log("am here");
        var user = firebase.auth().currentUser;
        user
          .updateProfile({
            displayName: self.display_name
          })
          .then(function() {
            self.$store.commit("setDisplayName", user.displayName);

            //update other records.
            // console.log("name", user.displayName);
            // console.log("location", self.user_location);
            // console.log("profile", self.profile_message);
            firebase
              .database()
              .ref("users")
              .child(firebase.auth().currentUser.uid)
              .update({
                name: self.display_name,
                location: self.user_location,
                profileMessage: self.profile_message
              });

            self.$store.commit(
              "setAlertMessage",
              "Your profile has been updated"
            );
          });
      }
    }
  },
  created() {
    if (this.photo_url != null) {
      this.$store.commit("setImageURL", this.photo_url);
    }
  }
};
</script>

<style scoped>
.wrapper {
  text-align: center;
}

.image--cover {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 10px;
  object-fit: cover;
  object-position: center;
}

.align-center {
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  position: relative;
}
</style>