<template>
  <v-container>
    <v-snackbar color="primary" v-model="alertSnackbar" :timeout="2000">{{alertText}}</v-snackbar>
    <v-row justify="center" dense class="flex-wrap mb-6">
      <v-col md="7" lg="6" cols="12">
        <v-card shaped :loading="loading">
          <v-card-text>
            <v-row style="margin:auto">
              <v-col cols="12" class="d-flex justify-center align-center flex-wrap">
                <div>
                  <v-avatar size="200">
                    <v-img v-if="!temp" :src="src"></v-img>
                    <v-img v-else :src="newSrc"></v-img>
                    <v-btn
                    @click="$refs.inputUpload.click()"
                    fab
                    style="position:absolute;bottom:5px;right:5px"
                  >
                    <v-icon>add_a_photo</v-icon>
                  </v-btn>
                  </v-avatar>
                  
                  <input
                    v-show="false"
                    ref="inputUpload"
                    type="file"
                    @change="fileUploadFunc"
                    accept="image/x-png, image/gif, image/jpeg"
                  />
                </div>

                <input
                  v-show="false"
                  ref="inputUpload"
                  type="file"
                  @change="fileUploadFunc"
                  accept="image/x-png, image/gif, image/jpeg"
                />
              </v-col>
            </v-row>
            <v-row style="margin:auto">
              <v-col cols="12">
                <v-text-field :label="$t('UserSetting.fullName')" v-model="fullName" />
              </v-col>

              <v-col cols="6">
                <v-combobox
                  v-model="selectedLang"
                  :items="langList"
                  item-text="name"
                  item-value="alias"
                  :label="$t('UserSetting.language')"
                  hide-selected
                  persistent-hint
                  small-chips
                  clearable
                  dense
                  return-object
                ></v-combobox>
              </v-col>
            </v-row>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              rounded
              color="rgb(94, 181, 177,.85)"
              class="white--text"
              @click="saveUserProfile"
            >
              <strong>{{$t("UserSetting.SaveBtn")}}</strong>
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      langList: [
        { name: "فارسی", alias: "fa" },
        { name: "English", alias: "en" }
      ],
      newSelectedLang: { name: "English", alias: "en" },
      loading: false,
      newSrc: "/img/empty.png",
      newFullName: "",
      temp: false,
      alertSnackbar: false,
      alertText: ""
    };
  },
  methods: {
    ...mapActions(["setLang"]),

    alertSnackbarMethod(text) {
      this.alertText = text;
      this.alertSnackbar = true;
    },
    saveUserProfile() {
      this.loading = true;
      if (this.newSelectedLang == null || this.newSelectedLang == undefined) {
        this.alertSnackbarMethod(this.$t("UserSetting.chooseLanguage"));
        this.loading = false;
        return;
      }
      //   this.setLang(this.newSelectedLang.alias);

      let profile = {
        "profile.fullName": this.newFullName,
        "profile.language": this.newSelectedLang,
        "profile.picture": this.newSrc
      };
      let me = this;
      Meteor.call("editUserProfile", profile, function(err, result) {
        if (result) {
          me.alertSnackbarMethod(me.$t("UserSetting.successfullSave"));
        }
        me.temp = false;
      });
      this.loading = false;
    },
    fileUploadFunc(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      let me = this;
      reader.addEventListener(
        "load",
        function() {
          me.temp = true;
          me.src = reader.result;
        },
        false
      );

      if (file && file.type.includes("image")) {
        reader.readAsDataURL(file);
      } else {
        this.alertSnackbarMethod(this.$t("UserSetting.chooseImage"));
      }
    }
  },
  computed: {
    fullName: {
      get() {
        if (this.users && this.users.length > 0) {
          this.newFullName = this.users[0].profile.fullName;
          return this.users[0].profile.fullName;
        } else {
          return "";
        }
      },
      set(newValue) {
        this.newFullName = newValue;
      }
    },
    src: {
      get() {
        if (this.users && this.users.length > 0) {
          this.newSrc = this.users[0].profile.picture;
          return this.users[0].profile.picture;
        } else {
          return "/img/empty.png";
        }
      },
      set(newValue) {
        this.newSrc = newValue;
      }
    },
    selectedLang: {
      get() {
        if (this.users && this.users.length > 0) {
          this.newSelectedLang = this.users[0].profile.language;
          return this.users[0].profile.language;
        } else {
          return { name: "English", alias: "en" };
        }
      },
      set(newValue) {
        this.newSelectedLang = {};
        this.newSelectedLang = newValue;
      }
    }
  },
  //   watch:{
  //       selectedLang(newLang, oldLang){
  //           this.setLang(newLang.alias);
  //       }
  //   }
  meteor: {
    $subscribe: {
      users: []
    },
    users() {
      return Meteor.users.find({ _id: Meteor.userId() }).fetch();
    }
  }
};
</script>
<style scoped>
.v-avatar{
  overflow: initial;
}
</style>