<template>
  <f7-page name="editprofile">
    <div v-if="upload_button">
      <f7-navbar title="Upload Your Picture" back-link="Back"></f7-navbar>
    </div>
    <div v-else>
      <f7-navbar title="Upload Your Picture"></f7-navbar>
    </div>
    <div class="wrapper">
      <img
        class="image--cover"
        :src="image_url"
        alt
        @click="launchFilePicker"
      />
      <p style="color: blue" v-if="upload_button">
        Click the back button to continue
      </p>
      <p style="color: red" v-else>
        Update Your Profile before chatting with Pals...
      </p>
    </div>
    <div class="align-center">
      <f7-block>
        <div v-if="uploadFile > 0">
          <p>
            <f7-progressbar
              :progress="0"
              id="demo-inline-progressbar"
            ></f7-progressbar>
          </p>
        </div>
        <div v-if="upload_button">
          <p>Update Profile</p>
        </div>

        <div v-else>
          <f7-button raised @click="updateProfile(true)"
            >Update Profile</f7-button
          >
        </div>

        <div>
          <br /><br />
          <f7-button raised @click="signOut(true)">Sign Out</f7-button>
        </div>

        <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],
  props: {
    f7router: {},
  },

  data() {
    return {
      name: null,
      email: null,
      password: null,
    };
  },
  computed: {
    user() {
      return this.$store.getters.user;
    },
    upload_button() {
      return this.$store.getters.upload_button;
    },
    group_image_url() {
      return this.$store.getters.group_image_url;
    },
    uploadFile: {
      get: function () {
        return this.$store.getters.uploadFile;
      },
      set: function (newValue) {
        this.$store.commit("setUploadFile", newValue);
      },
    },
    image_url() {
      return this.$store.getters.image_url;
    },
    files() {
      return this.$store.getters.files;
    },
    photo_url() {
      return this.$store.getters.photo_url;
    },
  },
  watch: {
    uploadFile(value) {
      if (value > 0) {
        const self = this;
        const app = self.$f7;
        app.progressbar.set("#demo-inline-progressbar", value);
      }
      if (value > 99) {
        this.$store.commit("setUploadFile", 0);
      }
    },
  },

  methods: {
    launchFilePicker() {
      this.$refs.file.click();
    },

    signOut() {
      //read the image file
      this.$store.dispatch("signOut");
    },
    onFilePicked() {
      //read the image file
      this.$store.dispatch("readFile", "setImageURL");
    },
    async updateProfile(inline) {
      const self = this;

      if (self.files) {
        console.log("files to update", self.files[0]);
        var payload = {};
        payload.email = self.user[0].email;
        payload.photo = self.files[0];
        payload.domain = self.user[0].domain;
        // console.log("photo is uploaded", self.files[0]);
        var url1 = await self.$store.dispatch("uploadImageMySQLPlus", payload);

        if (url1 == "0") {
          self.$store.dispatch("signOutPlus");
          return;
        } else {
          self.$store.commit(
            "setAlertMessage",
            "Sorry Profile Picture could not be updated now"
          );
        }
      } else {
        self.$store.commit(
          "setAlertMessage",
          "Select an Image File before continue with the upload"
        );
      }
    },
  },

  created() {
    var url = "https://penpalamerica.com/images/profilepicture.png";
    this.$store.commit("setGroupImageURL", url);

    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>