<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>
        <div v-if="uploadFile > 0">
          <p>
            <f7-progressbar
              :progress="0"
              id="demo-inline-progressbar"
            ></f7-progressbar>
          </p>
        </div>

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

<script>
import { mixin } from "../../js/mixin";
export default {
  mixins: [mixin],
  data() {
    return {
      name: null,
      email: null,
      password: null,
    };
  },
  computed: {
    user() {
      return this.$store.getters.user;
    },

    group_image_url() {
      return this.$store.getters.group_image_url;
    },
    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);
      },
    },

    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();
    },
    onFilePicked() {
      //read the image file
      this.$store.dispatch("readFile", "setImageURL");
    },
    async updateProfile(inline) {
      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", self.files);
        //console.log("self.files[0]", self.files[0]);
        var url1 = await self.$store.dispatch(
          "uploadImageMySQL",
          self.files[0]
        );

        var payload = {};
        payload.email = self.user[0].email;
        payload.name = self.display_name;
        payload.location = self.user_location;
        payload.profileMessage = self.profile_message;
        payload.domain = self.user[0].domain;
        payload.photo_url1 = url1;
        var response = await this.$store.dispatch("updateUserProfile", payload);
        if (response == "0") {
          await this.$store.dispatch("getUserPersonalDetails", payload);
          self.$store.commit(
            "setAlertMessage",
            "Your profile has been updated"
          );
        } else {
          self.$store.commit(
            "setAlertMessage",
            "Sorry we cannot update your profile at this time"
          );
        }
      } else {
        var payload = {};
        payload.email = self.user[0].email;
        payload.name = self.display_name;
        payload.location = self.user_location;
        payload.profileMessage = self.profile_message;
        payload.domain = self.user[0].domain;
        var response = await this.$store.dispatch("updateUserProfile", payload);
        if (response == "0") {
          await this.$store.dispatch("getUserPersonalDetails", payload);
          self.$store.commit(
            "setAlertMessage",
            "Your profile has been updated"
          );
        } else {
          self.$store.commit(
            "setAlertMessage",
            "Sorry we cannot update your profile at this time"
          );
        }
      }
    },
  },

  created() {
    //console.log("user in editprofile", this.user[0].email);
    if (this.user[0].photo_url1 != null) {
      this.$store.commit("setImageURL", this.user[0].photo_url1);
    }

    if (this.user[0].name != null) {
      this.$store.commit("setDisplayName", this.user[0].name);
    }
    if (this.user[0].location != null) {
      this.$store.commit("setUserLocation", this.user[0].location);
    }
    if (this.user[0].profileMessage != null) {
      this.$store.commit("setProfileMessage", this.user[0].profileMessage);
    }
  },
};
</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>