<template>
  <b-modal id="attachments-modal" size="lg" :no-close-on-backdrop="true" @shown="clearAttachments">
    <template v-slot:modal-header="{  }">
      <b-container>
        <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">
                Insira a foto
              </div>
              <div class="akkurat-bold max-header-text">Anexos</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-container>
    </template>
      <b-container>
        <b-row class="px-4">
          <div style="width: 47%;" v-for="attachment in attachments" class="m-2">
            <div class="wrap-drop-zone p-2">
              <h5 class="text-center">{{ attachment.description }} 
                <span class="text-danger" v-if="attachment.required">*</span> 

                </h5>
              <upload-image-thumb :attachment="attachment" @change="selected"/>
            </div>
          </div>
        </b-row>
      </b-container>
      <template v-slot:modal-footer="{  }">
        <b-container>
          <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 btn-red"
                @click="closeModal"
              >
                Cancelar
              </b-button>
              <b-button
                class="btn shadow-none border-0 btn-default"
                @click="uploadPicture"
              >
                Salvar
              </b-button>
            </b-col>
          </b-row>
        </b-container>
      </template>
  </b-modal>
</template>

<script>
import UploadImageThumb from '@/components/shared-components/UploadImageThumb.vue';
import AttachmentsService from "@/services/resources/AttachmentsService";

const service = AttachmentsService.build();


export default {
  name: 'photo-modal',
  props:{
    title:{
      type: String
    }
  },
  components: {
    UploadImageThumb,
  },
  data: () => ({
    files: [],
    attachments: []
  }),
  methods: {
    clearAttachments(){
     this.files = [];
    },
    selected(attachment){
      this.files = this.files.filter( file => file.id != attachment.id );
      this.files.push(attachment);
    },
    closeModal() {
      this.$bvModal.hide('attachments-modal');
    },
    uploadPicture() {
      if(this.checkAttachments()){
        this.$emit('uploaded', this.files);
        this.closeModal();
      }else{
        this.$fire({
          title: "Por favor, verifique os anexos obrigatórios",
          type: "warning"
        });
      }
    },
    checkAttachments(){
      for(var i = 0; i < this.attachments.length; i++){
        if(this.attachments[i].required){
          var found = false;
          for(var j = 0; j < this.files.length; j++){
            if(this.attachments[i].id == this.files[j].id){
              found = true;
            }
          }
          
          if(!found)
            return false;
        }
      }

      return true;
    },
    load(){
      service
      .search()
      .then(response => {
        this.attachments = response;

      })
      .catch(err => {
        
      });
    }
  },
  mounted(){
    this.load();
  }
};
</script>

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

.wrap-drop-zone{
  background: #e6e6e6;
  min-height: 200px;
}

.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>
