<template>
  <form>
    <div>
      <h5>Personnal information</h5>
      <input type="text" placeholder="Display name" v-model="displayName">
      <input type="file" name="profilePic"
            ref="profilePic"
            accept=".jpg, .jpeg, .png" />
      <button @click.prevent="uploadPicture" class="btn waves-effect waves-light red">Upload</button>
    </div>

    <div>
      <h5>Socials account</h5>
      <input type="text" placeholder="Facebook profile" v-model="socials.facebook_url" />
      <input type="text" placeholder="Linkedin profile" v-model="socials.linkedin_url" />
      <input type="text" placeholder="Twitter profile" v-model="socials.twitter_url" />
    </div>

    <button @click.prevent="updateProfile" class="btn waves-effect waves-light red">Update</button>
  </form>
</template>

<script>
import { firebaseApp, usersRef } from "../../firebase.config.js";
import axios from "axios";
import { settings } from "../../axios.config.js";

const instance = axios.create(settings);

export default {
  name: "Profile",
  data() {
    return {
      title: "Profile",
      max_size: 1000000,
      isLoading: false,
      displayName: null,
      profile_pic: null,
      socials: {
        facebook_url: "",
        twitter_url: "",
        linkedin_url: ""
      },
      currentUser: firebaseApp.auth().currentUser
    };
  },
  methods: {
    updateProfile() {
      let userProfileData = {
        socials: {
          facebook_url: this.socials.facebook_url,
          twitter_url: this.socials.twitter_url,
          linkedin_url: this.socials.linkedin_url
        },
        photoURL: this.profile_pic,
        displayName: this.displayName
      };
      const userData = {
        displayName: this.displayName,
        photoURL: this.profile_pic
      };
      console.log(userProfileData);
      firebaseApp
        .auth()
        .currentUser.updateProfile(userData)
        .then(() => {
          usersRef.child(this.currentUser.uid).update(userProfileData);
        });
    },
    uploadPicture() {
      const picture = this.$refs.profilePic.files[0];
      this.isLoading = true;
      if (picture.size > this.max_size) {
        return false;
      }
      let formData = new FormData();
      formData.append("image", picture);

      instance("https://api.imgur.com/3/image", {
        method: "POST",
        data: formData
      })
        .then(res => {
          this.profile_pic = res.data.data.link;
          this.isLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style></style>