<template>
    <b-container class="mt-5">
        <div class="mb-5">
          <h1 class="mb-4" style="text-align:left;">Agregar Imagen</h1>
            <b-row>
              <b-col class="p-0" cols="8">
                <b-form-file
                  v-model="nuevaImagenBanner"
                  id="nuevaImagenBanner"
                  block
                  placeholder="Seleccione la imagen o arrastre aqui..."
                  accept=".png, .jpg"
                ></b-form-file>
              </b-col>
              <b-col>
               <b-button block variant="success" @click="agregarImagen()">Agregar</b-button>
              </b-col>
            </b-row>
        </div>
        <h1 class="mb-4" style="text-align:left;">Eliminar Imagen</h1>
        <div class=" row ">
            <div  class="d-flex flex-wrap"  style="justify-content: space-between;">
                <div v-bind:key="imagenBanner.id"  v-for="imagenBanner in imagenesBanner"  >
                    <b-card  class="m-3" style="width: 28rem;"> 
                        <b-card-img :src="imagenBanner.img" alt="Image" ></b-card-img>
                        <b-card-footer><b-button variant="danger" @click="eliminarImagen(imagenBanner.nombreImagen)">Eliminar</b-button></b-card-footer>
                    </b-card>
                </div>
            </div>
        </div>
    </b-container>
</template>

<script>
import axios from "axios";
import config from "../config/config.js";
import Swal from 'sweetalert2'
export default {
  name: "editarBanner",
   data() {
    return {
      imagenesBanner: [],
      nuevaImagenBanner: null,
    };
  },
  methods:{
    async eliminarImagen(nombreImagenBanner){
      const swalWithBootstrapButtons = Swal.mixin({
        customClass: {
          confirmButton: 'btn btn-outline-success',
          cancelButton: 'btn btn-outline-danger'
        },
        buttonsStyling: false
      })

      swalWithBootstrapButtons.fire({
        title: '¿Estás seguro de que quieres eliminar la imagen?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Si, eliminar',
        cancelButtonText: 'No, cancelar',
        reverseButtons: true
      }).then(async (result) => {
        if (result.isConfirmed) {
          try{
            await axios.post( `${config.api}/eliminarImagenCarrusel`,{nombre: nombreImagenBanner} );
            await swalWithBootstrapButtons.fire(
              'Eliminado!',
              'Se ha eliminado la imagen con éxito.',
              'success'
            );
            location.reload();
          }
          catch(error){
            console.log(error);
            Swal.fire({
              icon: 'error',
              title: 'La imagen no pudo ser eliminada',
              text: 'algo salio mal, mensaje en consola',
            });
          }
        }
      
      })
    },
    async agregarImagen(){
      try{
        let formData = new FormData();
        let imagenBanner = document.querySelector('#nuevaImagenBanner');
        console.log('tamaño: ',imagenBanner.files.length);
        if(imagenBanner.files.length === 0){
           Swal.fire(
            '¿Aún no has seleccionado la imagen?',
            '',
            'question'
          );
          return;
        }
        formData.append("imagen", imagenBanner.files[0]);
        await axios.post( `${config.api}/agregarImagenCarrusel`, formData ,{ headers: {'Content-Type': 'multipart/form-data'}} );
        await Swal.fire(
          'Imagen agregada con éxito',
          '',
          'success'
        );
        location.reload();
      }
      catch(error){
        console.log(error);
        Swal.fire({
          icon: 'error',
          title: 'La imagen no pudo ser agregada',
          text: 'Algo salio mal, mensaje en consola',
        });
      }
       
    }
  },
  async created() {
    try {
      let path = `${config.api}/imagenCarrusel?nombre=`;
      let nombres = await axios.get(`${config.api}/nombreCarrusel`);
      nombres = nombres.data.data;
      for (let i = 0; i < nombres.length; i++) {
        let config = {
          url: `${path}${nombres[i]}`,
          method: "GET",
          responseType: "blob"
        };
        await axios(config).then(response => {
          let reader = new FileReader();
          reader.readAsDataURL(response.data);
          reader.onload = () => {
            this.imagenesBanner.push({ id: i, img: reader.result, nombreImagen: nombres[i]});
          };
        });
      }
    } catch (error) {
      console.log(`Ocurrio un error msj: ${error}`);
    }
  }
};
</script>



<style scoped>
.divMaster {
  height: auto;
}
</style>
