<template>
  <div
    class="modal fade"
    id="bs-modal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <button class="close-button" type="button" @click="bsModal.hide()">
          <i class="bi bi-x-circle-fill"></i>
        </button>
        <div class="modal-header">
          <h5>{{ $t('pages.upload.modal_error_title') }}</h5>
        </div>
        <div class="modal-body">
          <ul>
            <li v-for="item in uploadErrors" class="error-item">
              <span>{{ item.name }} - </span>
              <span>{{ item.details.error }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { PropType } from 'vue'
import { Modal } from 'bootstrap'
let bsModal = ref()
import type { uploadErrorInterface } from '@/views/interfaces/UploadPicturesView'

defineProps({
  uploadErrors: {
    type: Array as PropType<uploadErrorInterface[]>,
    default: []
  }
})

onMounted(() => {
  bsModal.value = new Modal(document.getElementById('bs-modal'), {})
})
function displayModal() {
  bsModal.value.show()
}

function closeModal() {
  bsModal.value.hide()
}
defineExpose({ show: displayModal, close: closeModal })
</script>

<style scoped lang="scss">
ul {
  padding: 0;
}
.modal {
  background: rgba(10, 31, 105, 0.6);
}
.error-item {
  padding: toRem(1);
  &:nth-child(odd) {
    background-color: var(--grey);
  }
}
.modal-content {
  border-radius: toRem(1.5);
}
.modal-body {
  overflow-y: auto;
  color: var(--grey-semi-dark);
}
.modal-header {
  color: var(--blue-dark);
}
.close-button {
  font-size: toRem(3);
  width: fit-content;
  border-radius: 50%;
  border: none;
  background: transparent;
  position: absolute;
  right: toRem(-4);
  top: toRem(-4);
  color: var(--white);
}

@media (max-width: toRem(50)) {
  .close-button {
    right: toRem(0);
    top: toRem(-5);
  }
}
</style>
