<template>
  <modal name="photo-modal" width="30%" height="auto">
    <div>
      <b-row class="d-flex justify-content-between mb-2 mt-1">
        <b-col class="d-flex modal-text-color ml-2" cols="8">
          <div class="d-flex align-self-center justify-content-center rounded-div mr-2 mt-1">
            <font-awesome-icon icon="camera" class="align-self-center" />
          </div>
          <div class="pt-1">
            <div class="inline-block akkurat-regular min-header-text">
              Mude a foto do seu perfil
            </div>
            <div class="akkurat-bold max-header-text">Alterar Foto</div>
          </div>
        </b-col>
        <b-col class="d-flex justify-content-end mr-2 mt-1">
          <span class="close-icon" @click="closeModal">
            <font-awesome-icon icon="times" class="align-self-center" />
          </span>
        </b-col>
      </b-row>
      <b-row>
        <b-col md="12" class=" justify-content-center">
          <div style="padding: 39px;
    position: relative;">

          <upload-image v-if="false" v-model="file" />

<upload-image
                 
                  :fileInit="user.avatar_url"
                  
                  label="Avatar"
                  v-model="file"
                />
          </div>

        </b-col>
      </b-row>
      <b-row>
        <b-col class="d-flex justify-content-center my-3 px-3">
          <b-button
            class="mr-2 btn shadow-none border-0 btn-default"
            @click="uploadPicture"
          >
            Salvar
          </b-button>
          <b-button
            class="btn shadow-none border-0 btn-default btn-red"
            @click="closeModal"
          >
            Cancelar
          </b-button>
        </b-col>
      </b-row>
    </div>
  </modal>
</template>

<script>
import UploadImage from "@/components/shared-components/FileInput";
import {objectToFormData} from "@/utils/convert.js"
import UserService from "@/services/resources/UserService";
const service = UserService.build();

export default {
  name: 'photo-modal',
  components: {
    UploadImage,
  },
  data: () => ({
    file: null,
  }),
  computed:{

user(){
  return this.$store.state.user.user;
}
  },
  methods: {
    setFile(file){
      this.file = file;
    },
    closeModal() {
      this.$modal.hide('photo-modal');
    },
    uploadPicture() {
      var vm = this;

  let form = {
    id: this.$store.state.user.user.id,
    name: this.$store.state.user.user.name,
    _method: "PUT",
    avatar: this.file 
  };


      service
        .update(objectToFormData(form))
        .then(response => {
          vm.$store.dispatch('userRequest')
          vm.$modal.hide('photo-modal');;
        })
        .catch(err => {
         let resp = JSON.parse(err.response.data);
          vm.$fire({
            title: "Falha ao salvar dados",
            text: resp.msg,
            type: "error"
          });
        });
      
    },
  },
};
</script>

<style scoped lang="scss">
@import '../../assets/css/main.scss';

.modal-text-color {
  color: #3E3E3E;
}

.min-header-text {
  letter-spacing: 0.2px;
  font-size: 9px;
}

.max-header-text {
  letter-spacing: 0.4px;
  font-size: 16px;
}


.close-icon {
  color: #979797;
  font-size: 20px;
}

.btn-default {
  border-radius: 20px;
  width: 100%;
  max-width: 192px;
  height: 35px;
  background: #278937;
}

.btn-red {
  background: #CB2D2D;
}

</style>
